-
AuthorPosts
-
November 5, 2024 at 11:11 pm #1470710
Hello,
Couple things I hope you can help with.1. On Mobile View: Product images are stretched on home page and individual product pages
- This topic was modified 2 weeks ago by bemodesign.
November 6, 2024 at 10:31 pm #1470791Please let me know on these issues. thanks!
November 7, 2024 at 5:04 am #1470800Any ideas on this?
November 7, 2024 at 7:48 pm #1470857Can someone look into this please? I need these images to not be stretched. thanks
November 9, 2024 at 8:05 pm #1470978Hi,
Thank you for your patience, try this css:@media only screen and (max-width: 767px) { #top .product .thumbnail_container img { width: 73%; margin: auto; } }
Best regards,
MikeNovember 9, 2024 at 10:44 pm #1470982Thanks, and I had code on this page once, that made it so the product image was big and not stretched, and ideas why it went back?
November 10, 2024 at 2:39 pm #1471005Hi,
I do not, but this seems to solve:#top.page .product .thumbnail_container img { width: 63%; margin: auto; }
adjust to suit.
I see that you have elementor classes on your page, please note that Enfold & elementor are not designed to work together and often have conflicts, as well as any other builder.Best regards,
MikeNovember 10, 2024 at 7:09 pm #1471022Now it is stretched on desktop view. Agh, seems like all my product photos are messed up on desktop or mobile. This page doesn’t even have elementor but you think this is why on other pages?
Even the Customer Reviews are messed up on mobile view. (see attached)
November 10, 2024 at 7:18 pm #1471024And this Category section used to be 4up on Mobile view(see code below and screenshot attached) . Can you help me with this? I really need to make this site live soon, but it has to look good on mobile view. thanks so much
I have this code now and it used to work. Is there anything I can do, like add “important” or anything?
@media only screen and (max-width: 767px) {
.responsive .home #wrap_all #av_section_4 .flex_column {
width: 48%;
padding: 1%;
}
}November 11, 2024 at 6:03 am #1471039Hi,
Thank you for the update.
Now it is stretched on desktop view. Agh, seems like all my product photos are messed up on desktop or mobile
You may need to wrap the code inside a css media query so that it only affects the desktop view.
@media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ #top.page .product .thumbnail_container img { width: 63%; margin: auto; } }
And this Category section used to be 4up on Mobile view(see code below and screenshot attached) .
Did you add or remove a section on the page? The css rule needs to be adjusted because it currently uses a temporary selector, #av_section_4, which can change depending on the number of sections on the page. Instead, you can apply a custom ID (e.g., av-section-shop-category) to the color section element containing the shop category. To do this, go to Advanced > Developer Settings > Custom ID Attribute and add your custom ID. Then, adjust the css rule as follows:
@media only screen and (max-width: 767px) { .responsive .home #wrap_all #av-section-shop-category .flex_column { width: 48%; padding: 1%; } }
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.