Hello, In the mobile version, the new products are distorted; they are larger than the phone screen. I tried to fix it with support, but they couldn’t, so they referred me to this group.
1 Like
@uszonae can you please share this page link?
If anyone has had this same problem and can give me some advice, I would be very grateful.
hi, this is the link www.uszonae.com
@uszonae possible to share screenshot? I checked few pages, looks ok
If you can access www.uszonae.com on your cell phone and click on “see new products,” you’ll see that the product images are distorted, but if you click on an individual product, they appear correctly.
Try this, in your code editor, find assets/webflow.css and at the end add
.w-commerce-commerceaddtocartoptionpillgroup {
flex-wrap: wrap;
}
And save.
1 Like
It doesn’t allow me to do it, it says editor is read only because the file is read only
Ok then on that page, in section that holds those new products, there should be setting Custom CSS, try there instead.
Make sure this collection is assigned to the correct collection template.
now it is ok!! ! Thank you!! On that same page, there’s another problem: if you view it on a phone, you can see a sign that says “Women Owned,” but the word “Women” is cut off. How can we adjust the size of the sign?
Similar thing but for section tha holds that text, add to Custom CSS
@media screen and (max-width: 479px) {
.block-logo-certificate img {
object-fit:contain;
min-height:150px;
}
}
object fit to dispaly whole iamge and min height to make it a bit bigger on mobile.
Note that the main hero banner is terrible AI, 6 fingers on both women on side.
Perfect! Thank you very much. Yes, the photo was generated by AI, and I hadn’t noticed the fingers. Thank you so much for pointing that out. I’d like to find something similar so I can change the image. Can you suggest where I can find a similar photo, since the website was designed for women.
2 Likes
When we adjusted the size of the products in “new products,” other products became distorted in the description. I’m sending a screenshot.
The color and size swatches are displayed with the product description, but not for all products, only for some.
For layout issue try to add
@media screen and (max-width: 767px) {
.wrapper-list-products .block-product {
grid-row-gap: 10px !important;
height: inherit !important;
}
.wrapper-list-products .block-product .price-1 {
margin: 0 !important;
}
.wrapper-list-products .block-product .add-to-cart {
height: 100%;
}
.wrapper-list-products .block-product .block-select-options {
height: 100%;
}
.w-commerce-commerceaddtocartoptionpillgroup {
gap: 5px;
}
}
For hero image try
Hi, @uszonae Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Check post number 3, the store link has been shared.