Orphan Product in a Single Row; Shouldn't Be That Way

HTML & CSS
1

Looking at this page in 768px width, I see one lone image in a row when it shouldn’t be. Any reason why?

2

It’s the combination of floats and nth-child selectors.

If you remove the floats and use inline-block instead, you’d get the same result down to your next break

ul.products li
    display: inline-block;
    width: 45%;
    margin: 0 auto;
}
3

I count 19 product items on that page. 4+4+4+4+3. The last time I checked, 19 was a prime number. How do you figure that there will not be an odd number of items in one row?

4

Seriously?!

5

Screen shot of the last 2 rows, please?
(Let’s see if I’ve misunderstood the question.)

6

Depending on what you want, yes. Unless everything is in a single row, there is no way to split the 19 items into equal rows.

I’m guessing having width at around 5% each is not something you would want.

So other than having the “excess” drop to another row, how do envision the display to be?

1 Like
7

I’m referring to the first row. I see one product on the first row.

802×1038 45.2 KB

8

Any chance the hamburger menu is reserving space causing the first item to move over?

9

You have a div as a child of the ul which is not allowed.

<ul class="products">
<div class="leftcol" style="display: none;">
        
                        
 </div>
<li> etc...

Therefore when you use nth-child(2) to float the second item right the first list item is the second child in that structure even though you have set the div to display:none and pushes it to the right. That div is not allowed outside of a list element anyway so remove it or place it inside a list element.:slight_smile:

4 Likes
10

Excellent. I was using a script to relocate that “leftcol”, and it wound up being moved to the wrong place. Thank you, PaulOB.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.