Why products don’t align normally on tabs or ipads

Your stylesheet needs to set a fixed height for the product blocks. This could be done using custom css, but I am unable to advise a style you can use unless you enable right click so browser tools can be used.

Dear @lorro

Many thanks! I have enabled the context menu.
If you could take a look further, I would be very grateful!

Try this custom css:

.products .product {
  height:354px;
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

Hi @lorro,

Thanks! I entered that code!

https://mobiletest.me/google_nexus_7_emulator/?u=https://www.woodenhottubsale.co.uk

if you would go to above link, scroll a bit down, you will see 10 products listed. From what I see, ideally, they should be listed as 3 per row. Now in the first row, there are 2 products and so on.

On this one, it looks even worse: https://mobiletest.me/ipad_mini_emulator/?u=https://www.woodenhottubsale.co.uk

To sum-up everything, if the resolution of the device goes under the 1024 x 600, this align error occurs. I tested also here: https://quirktools.com/screenfly/#u=http%3A//www.woodenhottubsale.co.uk&w=1024&h=600&a=25&s=1

Hi @lorro again,

Could you please check if I entered that custom CSS successfully? Because I can’t see any difference.

Yes, the css has been entered successfully and I can see an improvement.

I use a different test environment consisting of Chrome desktop with an extension called “Window Resizer”. This enables any viewport width to be emulated. Its not showing the 2 or sometimes 3 per row effect that you are seeing in your testing environment. As I don’t have a real ipad or nexus, I can’t tell which emulation is accurate for those devices.

There is one improvement you could make. As you have 5 products per row by default, every 5th product is on a row end and has no right padding. This style should be disabled when the number of products per row falls below 5, and you can do so with a media query:

@media (max-width:990px) {
  .woocommerce .products li.last {
    padding-right: 46px !important;
  }
}

Dear @lorro ,

That really did the trick, I mean the last one. Now almost everything is ok. I can’t thank you enough!

Just one last improvement, if I may ask, when we narrow down to 2 items per row, I see that the item`s picture gets lowered compared to the neighboring one. What could be causing that? The picture is below:

View post on imgur.com

“wpfc” is doing that – I don’t know what that is. You can overwrite it with:

ul.products li.product {
  float:left !important;
}

Check that “wpfc” is still behaving.

Now everything is in order. Nice to have such a person around, many thanks!

Wpfc is fastest cache plugin, very strange that it affected the alignment of images.

marked as closed.