Why are the products not flowing as expected on mobile

[cpp-dev]

Hey all. I've been noodling this issue in the background for awhile, but I can't quite put my finger on why it on mobile some product pages look like the attached image.

According to the CSS of the Levels ReadyTheme the rows should auto flow, but they often have a weird left something that doesn't show up in the browser inspector tool but is affecting the layout.

Anyone have any ideas?

[William Davis]

Did you double check to make sure the images in question; exists, correct format, name, blank space in name, unacceptable characters?

[Bruce - PhosphorMedia]

Looks like you need to set a define min-height that is equal to the largest block.

[cpp-dev]

Did you double check to make sure the images in question; exists, correct format, name, blank space in name, unacceptable characters?

They should all be correct. I'll hop into the server and check that.

[cpp-dev]

Looks like you need to set a define min-height that is equal to the largest block.

Hmm. I thought I had one defined already, but that's a good point. I'll check that again too.

Conclusion:

Turns out there were CSS rules for min-height, but not for the element that the items were in.

So after some hair pulling while I tried to find the right spot to put the new rule, it is working a charm. Thanks everyone! Especially you Bruce - PhosphorMedia

[Bruce - PhosphorMedia]

welcome...guess i should have mentioned that its a min-height setting for the outermost container of each individual product. of course, you could also set min-height on each child container with the same effect.

[cpp-dev]

I went with the child item, as it was more reliable in our case.

[Bruce - PhosphorMedia]

I went with the child item, as it was more reliable in our case.

that is quite true in general. just takes more time :)

[cpp-dev]

just takes more time :)

Yeah, there was a bit of faffing about trying to figure out exactly which selector to target to make it go. But that's part of the fun of CSS :D