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!
http://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: http://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: http://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.
