Body of checkout page shifts left on error message/info

Support
#1

Hi i have this problem where when i remove a product from the cart the body of the page shifts / moves left. This also happens on the checkout page when an input error appears when a customer does not fill in all the required fields. This only happens with the Chrome browser to which i am running the latest version.

My web address is

https//:kode-store.co.uk

Many thanks
Lee

#2

Hi @lakane-13,

Thanks for reaching out.

It’s quite weird, this is my first time seeing this issue and the page is pushed to the left. Would you mind adding this CSS to your global custom CSS?

html {
    overflow-x: unset !important;
}

I tried on chrome’s developer tool and it works on your site.

Thanks!

#3

Thanks for getting back to me. I tried this and it did not work. I tried a lot of things with the overflow-x property but nothing worked. I found as you said it worked in chrome developer but not when entered in the style sheet.

I have made some changes in the child style to the error message boxes but i removed them to see if they were the problem but no result.

I also made some changes to ethos woocommerce css which is now overridden by the child theme by ethos-woo-child.css but i only did this recently and this was happening before that. I was wondering if it may be a js problem.

#4

Hi There @lakane-13

I have tested your issue on Chrome browser but I could not replicate this issue. Could you please try clearing your browser cache and re-test this issue again.

Let us know how it goes.
Thanks!

#5

Hi, i have tried clearing the cache but its still moving left. Interesting that its not doing the same in your chrome browser as it is with Rad’s and mine. My Chrome version is – Version 68.0.3440.75 (Official Build) (64-bit)

#6

Hi @lakane-13,

Would you mind providing your admin login credentials in a secure note? It’s working on google chrome’s developer but maybe because it triggers the re-render of the page. I’ll have to test it by adding a pre-loaded CSS.

Thanks!

#7

Hi @lakane-13,

Since the CSS works on chrome developer tools but not when added the CSS through admin, then we’ll have to check it by adding it too and that requires logging in.

Thanks!

#8

I added the css

html {
overflow-x: unset !important;}

to my child theme css should i try to add it to the main ethos css instead.

#9

Hi There,

No, you can only add a custom CSS on the child theme via the child theme’s style.css file (or an enqueued custom CSS file if any).

Check all your existing custom CSS here first and address all found errors, only then you can add Rad’s provided code.

Also, clear your browser’s cache and any caching features that your site might have.

Cheers!

#10

Hi, i sorted my errors and added Rad’s code to child style but issue is still there. I changed the stack and tried the other stacks (renew and integrity) and it is only happening with Ethos. I checked my partners laptop to see if the issue was on my computer but it does the same on her chrome browser. I have switched the child theme off and all plugins except woo, but the issue is still there. I can not think of anything else.

#11

Ok strange thing in ethos stack css there is this piece of code

.x-container.main:before {
content: "";
display: block;
position: absolute;
top: -35px;
bottom: -10000em;
bottom: 0;
width: 10000em;
background-color: #fff;
z-index: -1;}

However if i add this to my child css

.x-container.main:before {width:0em!important;}

Then the problem is fixed.

Can you explain why? And if by adding this css to the child theme will it cause me other issues?

#12

Hi,

Yes, that code is from ethos stack but it shouldn’t be affecting the layout like in your site.

I tried in my test site and in our demo but can’t replicate it.

http://demo.theme.co/shop-ethos/cart/

I would go with the code that my colleague have provided. Can you try adding the code in Appearance > Customize > Additional CSS

html {
      overflow-x: unset !important;
}

Thanks

#13

I added the css via Appearance > Customize > Additional CSS which was output like this on the site

<style type="text/css" id="wp-custom-css">
		html {
overflow-x: unset!important;
 }		</style>

But it did not work however my solution does work, i would just like to know if the solution i have is going to give me any troubles, what i should look out for.

#14

Hey Lee,

Your solution is actually the one that you should use. I’m sorry for the confusion here. We should not override code on a structural or foundational level like:

html {
    overflow-x: unset !important;
}

Thanks.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.