Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1489862

    Hello,

    I am working on an ecommerce web site and there is a shopping cart icon on lower right. When I click on the cart icon, shopping cart floats from the right. But, once the cart floats, my main page moves slightly right. Is there any way to fix this? Thank you….

    #1489874

    Hey a_edemirci,

    Thank you for the inquiry.

    This seems to be an issue with a custom css style from the cart plugin.

    body.xoo-wsc-cart-active {
        padding-right: 15px;
    }

    Try to override it with this css:

    body.xoo-wsc-cart-active {
        padding-right: auto;
    }
    

    Please make sure to purge the cache before checking the page.

    Best regards,
    Ismael

    #1489881

    Hello Ismael,

    Thank you. But, that CSS code was written after I wrote here and before you replied to fix the problem. It is not the cause. After that code, main page does not move anymore. Still, it moves when the page is visited on the phone in the landscape mode. It has something to do with the resolution. I could not find a universal solution that prevents main page to move when side cart floats in all possible resolutions….

    #1489910

    Hi,

    Thank you for the update.

    This is what happens when we toggle the css rule — you’ll notice how the document moves when we turn it on and off. The issue is definitely caused by the css rule. Please check this short video:

    Best regards,
    Ismael

    #1489921

    Thank you. Any way to fix it and prevent shifting at any resolution? Thank you….

    #1489946

    Hi,

    Thanks for following up.

    You need to remove the css code or override it with this css rule.

    body.xoo-wsc-cart-active {
        padding-right: auto;
    }

    Let us know how it goes.

    Best regards,
    Ismael

    #1489954

    Hello,

    I removed all CSS related to cart and overrode it with your code. I even added !important, but main page shifted again when I clicked cart icon. Sorry, but it did not work.

    Thank you….

    #1489973

    Hi,

    The css modification was still in place when we checked. Where exactly did you add the css? Please try to override it in the Quick CSS field using the css rule we provided above and make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings.

    Screenshot-2025-10-09-at-1-12-48-PM

    Best regards,
    Ismael

    #1490075

    Hello Ismael,

    I did what you said and it does not work. I am leaving the CSS code as you suggested for you to check. I also disabled file compression in the preferences. You will see that main page still shifts when cart button is clicked.
    Thank you….

    #1490078

    Hi,
    Try this css:

    body.xoo-wsc-cart-active, html.xoo-wsc-cart-active {
        overflow: visible !important;
    }

    After applying it clear your browser cache and check.

    Best regards,
    Mike

    #1490119

    Hello Mike,

    This one fixed the problem. Thank you….

    #1490130

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

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