Yo Soy Fiesta Yo Soy Fiesta - 1 month ago 5
CSS Question

Content not wrapping properly?

I am having a problem on my portfolio site where the content is not wrapping properly. It looks fine in the three column view for widths greater than 480px, but when it's under that it switches to the two column layout / mobile view and it doesn't quite wrap properly anymore.

Site: kevinwallace.io

There's that huge space and I'm trying to figure out how to correct it. The homepage is the only problem. Any help would be appreciated!

HTML Skeleton:

<div id="wrapper">
<section>
<ul id="gallery">
<li></li>
</ul>
</section>
</wrapper>


Relevant CSS:

#wrapper {
overflow: auto;
margin: 0 auto 100px auto;
max-width: 940px;
padding: 0 5%;
}

#gallery {
margin: 0;
padding: 0;
list-style: none;
}

#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f2f2f2;
}

#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.5em;
color: #3b4145;
}

Answer

Add #gallery li:nth-child(odd) {clear: left;} for the mobile version and undo it for the three column.


You should also make a relevant rule for the three column layout #gallery li:nth-child(3n+1) {clear: left;}.

It currently works by luck (due to the contents of the specific items, if you change their order it would fail)