Hi all,

I am getting annoying horizontal scroll on a Woocommerce page when I view portait (landscape orientation is fine) and wanted to know if anyone can help me.

It seems to be as a result of the form Woocommerce has included as when I add display: none; to the .form class it fixes it (though I'd rather the info within the form stayed...).

form {
    margin: 50px auto;
	position: relative;
	top: -51px;
}

Here's a page where the problem is happening

I can't figure this out and could really use your help!

11 hours ago, Demonolith said:

Hi all,

I am getting annoying horizontal scroll on a Woocommerce page when I view portait (landscape orientation is fine) and wanted to know if anyone can help me.

It seems to be as a result of the form Woocommerce has included as when I add display: none; to the .form class it fixes it (though I'd rather the info within the form stayed...).

form {
    margin: 50px auto;
	position: relative;
	top: -51px;
}

Here's a page where the problem is happening

I can't figure this out and could really use your help!

That CSS written by Woocommerce is terrible.  I dread to think how the rest of it is written.  Firstly they are attaching those very specific styles to every form on the page with the element selector.  where the hell does 51px come from?  Definite magic number there.

Your page is broken because your `body` element has a width of 960px.  A quick fix is to make it a max-width of 960px although this is really narrow considering average screen sizes now.  I recommend somewhere closer to 1200px.

On smaller screens the form is broken.  Get a class added to it and then
 

.my-form {
  width: 100%;
  overflow: hidden;
}

 

Edited August 21, 20188 yr by rbrtsmith

Woocommerce has become this monster where patches and hacks keep getting added to fix the appalling code right at the core.

popular =/= good

Yeah, I see now that the default Woocommerce CSS is terrible.

I was looking at the Hestia theme, do you know how I can retain my current theme while changing only the Woocommerce elements so that effectively only the store and checkout pages change?

Sorry if I veered too far off-track...