Blank spaces on portfolio page

[Christina]

My sister is having an odd problem on her portfolio page, it's showing two blank spaces. She asked me for help, but I'm stumped.

Would someone mind taking a look at this? It would be much appreciated!

http://uniquewebcopy.com/portfolio/page/2/

[Lauren @ OnceCoupled]

They're all floats, so the first in each row needs to be cleared. The code below will solve the current problem, so you can see what I mean, but it isn't a solution - it's only clearing a single item instead of the first item in each row. The best way to do this is apply column classes to each item. There should be an article or two on this available.

.entry:nth-child(5) {
     clear: both;
}

p#authorsure-last-updated {
     clear: both;
}

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Christina]

Thanks Lauren! A lot of the code could have been written much better, but it was my first site a long time ago and unfortunately, I don't have time to re-write it all right now. The nth-child will hold us over in the mean time.

It does still baffle me as to why it was only that one portfolio item though...no matter how many other items were added, there were still 2 empty spaces before that item while everything else lined up correctly.

Thanks again.

[Lauren @ OnceCoupled]

It's because one of the items before it had two lines of text. If you made sure there was always one line of text only, it would work.

You may want to go ahead and apply that same style to the 9th element, as well.

🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts