Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 5, 2024 at 11:11 pm #1470710
    bemodesign

    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 #1470791
    bemodesign

    Please let me know on these issues. thanks!

    November 7, 2024 at 5:04 am #1470800
    bemodesign

    Any ideas on this?

    November 7, 2024 at 7:48 pm #1470857
    bemodesign

    Can someone look into this please? I need these images to not be stretched. thanks

    November 9, 2024 at 8:05 pm #1470978
    Mike

    Hi,
    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,
    Mike

    November 9, 2024 at 10:44 pm #1470982
    bemodesign

    Thanks, 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 #1471005
    Mike

    Hi,
    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,
    Mike

    November 10, 2024 at 7:09 pm #1471022
    bemodesign

    Now 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 #1471024
    bemodesign

    And 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 #1471039
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.