Content not wrapping properly?

Question

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.

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;
 }

there is no html tag wrapper. Your markup is wrong starts with section and ends with wrapper — Geeky, Oct 26 '16 at 18:51
http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights — aahhaa, Oct 26 '16 at 18:51

score 1 · Accepted Answer · answered Oct 26 '16 at 19:02

1

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)

answered Oct 26 '16 at 19:02

Gabriele Petrioli

191,379
34
261
317

Thank you! This helped fix the mobile view but now the wrapping is incorrect for widths over 480px. I'm unsure of what you mean by relevant rule? – Yo Soy Fiesta Oct 26 '16 at 19:51
@YoSoyFiesta see http://plnkr.co/edit/2PdVyLMdBVBbaWgTi86P?p=preview At the bottom of the html i have added the rules you need to add – Gabriele Petrioli Oct 26 '16 at 19:58
Haha yea I found out I wasn't resetting it properly and fixed it before I saw this. Thank you so much! – Yo Soy Fiesta Oct 26 '16 at 19:59

score 0 · Answer 2 · answered Oct 26 '16 at 19:02

That's due to the floating of elements that don't have he same height. Try to use flexbox instead of floats:

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

Remove the floats and add some margin-bottom from/to your li rule to preserve some vertical distance

score -1 · Answer 3 · answered Oct 26 '16 at 19:01

I would recommend you to add a clearfix after each two elements for small devices.

Here's an example of what it will look like.

@media screen and (max-width: 479px) {
  .clearfix-sm:after {
    display: table;
    clear: both;
    content: " ";
  }
}

<div id="wrapper">
  <section>
    <ul id="gallery">
      <li></li>
      <li></li>
      <div class="clearfix-sm"></div>
      <li></li>
      <li></li>
      <div class="clearfix-sm"></div>
      <li></li>
      <li></li>
      <div class="clearfix-sm"></div>
    </ul>
  </section>
</div>

Content not wrapping properly?

3 Answers3