Develop Reference

CSS/HTML how to show only the first two lines of a flexbox

For a project I need to create a search bar. The search results need to be displayed in a grid. The items should be next to each other and two rows high. If there are more results I need to show a button +32 to display all the results.
The problem I am facing is that I have no idea how to accomplish this. I have used flexbox and flex-wrap in order to get new items to be shown in the next line when they don't fit on the previous one. But I don't know how to only display the first two lines.
.container{
display: flex;
flex-wrap: wrap;
background-color: blue;
max-width: 15rem;
gap: 1rem;
}
.item{
background-color: red;
padding: 0 0.2rem;
}
<div class="container">
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Helllooo</p>
</div>
<div class="item">
<p>Hel</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Test</p>
</div>
<div class="item">
<p>For</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Hello</p>
</div>
<div class="item">
<p>Helllooo</p>
</div>
<div class="item">
<p>Hel</p>
</div>
<div class="item">
<p>Hello</p>
</div>
</div>

Here is a quick solution, although it doesn't calculate the length yet.
items = ["Helooo","Testing","Holaaaa","Hiiii","Hello","Greetings fine sir","Welcome","Bonjour","Oi you there"];
let limit = 5; // You will need to calculate this somehow
function display(limit){
document.getElementById("searchContainer").innerHTML = "";
for (let item of items.slice(0,limit)){
document.getElementById("searchContainer").innerHTML += `<div class=item>${item}</div>`;
}
if (items.length > limit){
document.getElementById("searchContainer").innerHTML += `<div class=item onclick="display(${items.length})">+${items.length-limit}</div>`;
}
}
display(limit);
.container{
display: flex;
flex-wrap: wrap;
background-color: whitesmoke;
max-width: 15rem;
gap: 1rem;
}
.item{
background-color: rgb(100,100,200);
padding: 0 0.2rem;
border-radius: 2px;
}
<div class=container id=searchContainer>
</div>

Not able to put divs side by side on Firefox but works on Chrome

With the following markup, I'm able to put two div side by side, as seen on image 1, but only on Chrome. Image 2 shows how Firefox processes the HTML. Is this a known issue I missed? How do I fix this?
<div style="background-color: #ffcc33;">
<div class="entry-content" style="float: left;">
<h3>Full Article: Link</h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
<?php
the_field('generated_summary');
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'inbox' ),
'after' => '</div>',
) );
?>
<p class="read-more"><?php echo esc_html('Read More', 'inbox'); ?></p>
</div>
<div style="float: left; background-color: #eee;">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS
.page .post-content .entry-content, .single-post .post-content .entry-content {
height: auto;
overflow: hidden;
background: #42ffec;
width: 60%;
}
.post-content .entry-content {
height: 60vh;
overflow: hidden;
position: relative;
text-align: justify;
}
div {
display: block;
}
EDIT: Got it to work. I set my outer most div to overflow: hidden and from my second inner div, removed float:left, and added overflow:hidden

Use display: flex property. It is supported in major browsers.
.main-container {
background-color: #ffcc33;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.more-details {
float: left;
background-color: #eee;
}
<div class="main-container">
<div class="entry-content" style="float: left;">
<h3>Full Article: Link</h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
Dynamic markup from PHP
<p class="read-more">Read More</p>
</div>
<div style="more-details">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>

How to make bootstrap card clickable?

In order to use on my website, I am trying to make bootstrap cards clickable.
But when I wrap boxes with "ahref" link, there are a lot of styling problems.
The boxes becomes smaller. I tried a lot of alternatives however I couldn't find why I am having problem with it.
You can also find https://codepen.io/snarex/pen/ebQdgj which I have made some test.
section {
padding-top: 4rem;
padding-bottom: 5rem;
background-color: #f1f4fa;
}
.wrap {
display: flex;
background: white;
padding: 1rem 1rem 1rem 1rem;
border-radius: 0.5rem;
box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.wrap:hover {
background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%);
color: white;
}
.ico-wrap {
margin: auto;
}
.mbr-iconfont {
font-size: 4.5rem !important;
color: #313131;
margin: 1rem;
padding-right: 1rem;
}
.vcenter {
margin: auto;
}
.mbr-section-title3 {
text-align: left;
}
h2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.display-5 {
font-family: 'Source Sans Pro',sans-serif;
font-size: 1.4rem;
}
.mbr-bold {
font-weight: 700;
}
p {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
line-height: 25px;
}
.display-6 {
font-family: 'Source Sans Pro',sans-serif;
font-size: 1re
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
<div class="container">
<div class="row mbr-justify-content-center">
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-volume-up fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Stay <span>Successful</span></h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-calendar fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Create
<span>An Effective Team</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-globe fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Launch
<span>A Unique Project</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-trophy fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Achieve <span>Your Targets</span></h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</div>
</section>

You could try making your a tags position: absolute; like so...
HTML
<div class="wrap">
</div>
CSS
.wrap{
position: relative;
}
.wrap a{
position: absolute;
width:100%;
height:100%;
top:0px;
left:0px;
}
The a tag now sits on top of your card and should grow and shrink with the card as needed. You can also add border-radius to the a tag to match the corners of your card.
I also updated your CODEPEN so you can see the changes in the inspector to get a better idea of whats going on.

Display content of columns at same level/ height

I have column in a div set to display:flex. All the columns are centered. The column contents are all vertical-align: middle;
It works great when the content is all of the same height (see snippet). But when one column is taller than the others, I want the shorter columns to be at the same level/ height as the tallest column as in my image below, whilst the tallest column remains vertically in the middle:
Is this possible using css or javascript?
.cont { height:400px; width: 100% }
.button-bottom {display: flex;
align-items: center;
justify-content: center; height:50%;background: yellow;}
.column {width: 20%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;}
<div class="cont">
<div class="button-bottom">
<div class="column">
<h5>Ambience Blah BLha mana na hhsjs</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
</div>
</div>

I do this for the points. Here's your fix.
.cont { height:400px; width: 100% }
.button-bottom {display: flex;
justify-content: center; height:50%;background: yellow;}
.column {width: 20%;
display: table-cell;
float: none;}
<div class="cont">
<div class="button-bottom">
<div class="column">
<h5>Ambience Blah BLha mana na hhsjs</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
<div class="column">
<h5>Ambience</h5>
</div>
</div>
</div>

https://jsfiddle.net/ex3ntia/r67y6hhu/3/
I've added 2 css lines that you can delete
/* demo */
h5 {position:relative;}
.column h5:before {display:block;background-color:red;content:'';width:100%;height:2px;top:15px;position:absolute;}

Uneven Responsive Image/Text Grid with Overlay

I've been trying to create the below layout to no avail. Would someone be kind enough to help me out in either creating a minimal working example or linking to somewhere that would be able to help me out with this?
What I need is a grid where the row heights are the same. With each row containing 2 images and 1 text column (the text column being placed in different locations in each row). The text column needs to be the same height as the images and I'd like the text to be vertically centered but the width of it needs to smaller (half the size). With the images, I'd like to have a white overlay on hover or touch(mobile) with a header and a couple lines for links and one link that will have a video popup (a la fancybox).
I'd like for this to be responsive and adapt to screen sizes. On mobile I'm fine with each box being 100% width but it's the tablet sizes I think I'm having issues with laying this thing out properly. The hover state would obviously need to become a touch state on these platforms.
I'd supply my code if need be but I think I'd like to just start from scratch since I feel like I've just created a huge mess.
I feel like this is something that should be so simple yet I'm having way too many problems with this and I can't seem to find any websites that showcase examples of what I'm trying to create....similar ideas have been found but not exactly what I'm looking for.
Details:
1140px as the max width of the container
444px as the max width of the images
222px as the max width of the text boxes
5px margin/padding
Any help in the right direction would be grateful.
http://jsfiddle.net/sa7v57bf/
<div class="container">
<ul>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
<ul>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
<li class="text">
<div>
Some Text.
</div>
</li>
<li class="media">
<img src="http://placehold.it/444x342" alt="Image">
<div class="info">
<h2>HEADER</h2>
<div class="program-info">
<p>Program Page</p>
<p>Video</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
*{box-sizing:border-box}.container{max-width:1140px;margin:0 auto;padding:0 10px}ul,ul li{padding:0}ul{list-style:none;margin:1% 0;font-size:0}ul li{display:inline-block;width:100%;margin:0 0 1%;height:100%;position:relative}ul li img{width:100%;display:block}ul li.text{background-color:#000;color:#FFF;padding:20px 10px;font-size:1.5rem;width:100%;vertical-align:top;text-align:center}#media (min-width:550px){ul li{width:50%}ul li.text div{margin:2%}}#media (min-width:1000px){ul li{width:39.5%;margin:0 .5%}ul li:first-child{margin-left:0}ul li:last-child{margin-right:0}ul li.text{width:19%;min-height:305px}}#media (min-width:1140px){ul li.text{min-height:341px}ul li.text div{margin:40% 0}}.info{background:rgba(255,255,255,.83);color:#000;font-size:2.4rem;left:10px;opacity:0;overflow:hidden;padding:3rem;position:absolute;top:10px;right:10px;bottom:10px;-webkit-transition:.6s;transition:.6s}.info:hover{opacity:1}

A combination of things here.
Flexbox for the equal heights, max-width where required, paddings/margin for spacing....oh, and positioning for the overlays.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1140px;
margin: auto;
margin-top: 5px;
border: 1px solid grey;
display: flex;
padding: 5px;
}
.wrapper > *:nth-child(2) {
margin: 0 5px;
}
.text,
header,
imgwrap {
flex: 1;
}
.text {
width: 20%;
padding: 1em;
max-width: 222px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
header {
background: #bada55;
position: relative;
}
.imgwrap .overlay,
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(155, 0, 65, .25);
padding: 1em;
font-weight: bold;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0.25s ease;
}
.imgwrap:hover .overlay,
header:hover .overlay {
opacity: 1;
visibility: visible;
}
.imgwrap {
width: 40%;
position: relative;
}
.imgwrap img {
width: 100%;
display: block;
max-width: 444px;
}
<div class="wrapper">
<div class="text">Lorem ipsum dolor.</div>
<header>
<div class="overlay">Overlay Text</div>
</header>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
<div class="wrapper">
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="imgwrap">
<img src="http://lorempixel.com/output/food-q-c-444-250-3.jpg" alt="" />
<div class="overlay">Image text</div>
</div>
</div>
Media queries can manage the rest.
Codepen Demo.