Pe-Ter Pe-Ter - 6 months ago 7
HTML Question

Why do my floated elements break on smaller resolutions if there is enough space?

My floated elements look the way they should on a wide viewport but when I scale it down a little (from 1920px width to somewhere around 1100px width) they just break and stack vertically. There is enough room for them to still be floated at that resolution, I can't seem to figure out what is the problem.

Here is my HTML:

<div id="page-content" class="page homepage">
<div id="homepage-cards">

<div class="homepage-card">
<img src="{{asset("img/content/web_development.png")}}" alt="web development" />
<h2>Web development</h2>
</div>

<div class="homepage-card">
<img src="{{asset("img/content/web_development.png")}}" alt="web development" />
<h2>Web development</h2>
</div>

<div class="homepage-card">
<img src="{{asset("img/content/web_development.png")}}" alt="web development" />
<h2>Web development</h2>
</div>

<div class="homepage-card">
<img src="{{asset("img/content/web_development.png")}}" alt="web development" />
<h2>Web development</h2>
</div>

</div>
</div>


Here is my LESS:

div.page.homepage {
position: relative;
background: @skyscrapers no-repeat center center fixed;
.background-size(cover);
min-height:1080px;
z-index:10;
}

div#homepage-cards {
display:inline-block;
position:absolute;
top:40%;
left:50%;
.translate(-50%, -50%);

div.homepage-card {
display:inline-block;
text-align:center;
background-color:#ffffff;
padding:56px 60px 100px 60px;
float:left;
margin-right:30px;
margin-bottom:30px;
&:nth-child(2n+2) {
margin-right:0;
}
&:nth-child(3) {
clear:left;
}
h2 {
margin-top:25px;
text-transform: lowercase;
font-weight:bold;
}
}

}


This is how those cards look on a wide viewport:
Cards on a wide viewport

This is how they look on a bit smaller viewport (while still having enough space to stay in two columns):
Cards on a slightly smaller viewport

It seems that it's the parent "inline-block" element shrinking together with the viewport width even though its position is absolute and it still has a lot of room around it.

How can I stop that element shrinking until it doesn't have enough room?

Answer

(...) while still having enough space to stay in two columns

No, they don't. You have set the #homepage-cards to be left: 50%, which basically means that it will be half the width of the entire viewport. Inside that half, there is not enough room for two in a row.

I'd suggest finding a different way to center them than the translate-trick you are using now, or add some media-queries for when it's above/below the breaking point.