“SINGLE PRODUCT BUILDER” Breakes in mobile version

This topic has 2 replies, 2 voices, and was last updated 1 years, 7 months ago ago by Tony Rodriguez

  • Avatar: Kelgor
    October 15, 2022 at 19:14

    Recently I have designed a version of “single product” for the desktop view, with a floating column and a sticky “add to cart”.
    When the desktop version automatically adapts to the mobile version, it breaks completely.

    On the one hand, the floating element is placed below the first column, in my case, after the long description and the opinions.

    -> Column 2 under Column 1: https://gyazo.com/2ac7bf3dfda5315302fa9ab16bc33810
    visit https://moydog.com/p/royal-canin-exigent-cats/ to check.

    On the other hand, the sticky menu is not “activated” until you reach the footer of the page, because it understands that what you are consulting is the product.

    -> Sticky menu too far: https://gyazo.com/fdce931c3d49c11b00c145b503d30d2e
    visit https://moydog.com/p/royal-canin-exigent-cats/ to check.

    I NEED to create two different SINGLE PRODUCT versions or a solution, it is impossible to design a product page and have to decide where to display it correctly, in mobile version or on desktop.

    PLEASE visit https://moydog.com/p/royal-canin-exigent-cats/ to check the mobile version vs desktop.


    1 Answer
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    October 16, 2022 at 10:22

    Hello, @Kelgor,

    First of all, please note that there is no separate option to create the mobile version layout for the single product page, The mobile version automatically adapts the style/design of the desktop version based on responsiveness.

    About the sticky add-to-cart section, let me try to explain its functionality to you, that how it works. The Sticky Add to Cart section only appears to show when the add to cart button will be moved up/down from the screen, like:

    You can see in this image: https://postimg.cc/307sYfy4 that I have scrolled down to the bottom but the add to cart button is there on the screen so till that add to cart button is there the sticky will not show, and as soon as the add to cart button will disappear and move up/down from the screen, the sticky add to cart button will show at that time: https://postimg.cc/ykq8M7YW so this is how it works, and in your case, it is same, you have the add to cart button in the sticky sidebar and that sticky sidebar will move to the page till bottom and that is the reason the sticky add to cart section shows at very bottom when scrolling down to the page, hope this is clear enough now.

    And for other columns settings like above or bottom on the mobile version of the content, we have to check it on your site, so please share your site WP Admin URL and Credentials with me here in the private content area of this topic so that I will further look into it for you and help you out accordingly.

    Regards 8Themes Team.

  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.