-
Posts
-
Hi,
I would need to display 3 products per row on devices between 480 and 767px. So I tried to add this code:
@media only screen and (min-width: 480px) and (max-width: 767px) {
.shop_columns_3 .products .product {
margin: 0 1% 1% 0 !important;
width: 30.6% !important;}
}
This code divides my screen in 3 columns, but there is no product in the third one.
Could you please tell me which code I need to add to achieve this?
Thanks a lot!
If needed, you can find a link and credentials to my website in private content.
Thanks a lot!Hey fcp,
Thank you for the inquiry.
Try to set the clear property to none to allow the third item to float to the right of the second item in every row.
.shop_columns_3 .products .product { margin: 0 1% 1% 0 !important; width: 30.6% !important; clear: none !important; }Default value for the clear property is both.
// https://www.w3schools.com/cssref/pr_class_clear.asp
Best regards,
IsmaelHi Ismael,
Thanks a lot for your reply!
It seems to work on most of my shop pages, but on some of them, there still are empty spaces.
I made a video and gave you a page address in private content.Hi,
Thank you for the update.
The issue seems to occur on screen sizes lower than 480px. To fix the issue, we may need to set a minimum height to the product items to allow them to float correctly beside each other.
.shop_columns_3 .products .product { min-height: 350px; }Please add the code inside the css media query for mobile view.
Best regards,
Ismael
- You must be logged in to reply to this topic.