Hello,
On desktop, my site won’t fit the window properly and has a horizontal slider that makes it annoying.
Website: Henhousespencer.com
Please see screenshot:
Topic summary
Issue: On desktop, the site shows a horizontal scroll bar and doesn’t fit the window width properly.
Diagnosis: Likely caused by small left/right (“x”) margins on a multi-column section built with Gempages. A screenshot was shared for context.
Preferred fix:
- Inspect the specific multi-column section in Gempages and remove the left and right margins at the section/component level.
Workarounds (CSS):
- Edit theme CSS (e.g., base.css) to force zero horizontal margins on the identified class: .gxMMOCIIuC { margin-left: 0 !important; margin-right: 0 !important; }
- Alternatively, hide horizontal overflow globally: body { overflow-x: hidden !important; } (not ideal; masks issues rather than fixing them).
Notes:
- “X margins” refers to horizontal margins; “overflow-x” controls horizontal overflow visibility.
Status: No confirmation from the original poster; solution not yet verified and the issue appears open.
Hey, the issue is arising because there is a small left and right margin on this multi column section:
I’m not sure familar with Gempages, but the best option would be to take a close look at this section, and see if there is any way to remove left and right margins (also know as x margins.)
Alternatively, here are some hacky approaches which you can use if the above fails, but I would recommend finding a better fix.
- Go to Online Store → Themes → … → Edit Code.
- Find base.css (or a similar file).
- Paste the following code: .gxMMOCIIuC { margin-left: 0 !important; margin-right: 0 !important; }
OR
Another hacky approach:
- Go to Online Store → Themes → … → Edit Code.
- Find base.css (or a similar file).
- Paste the following code: body { overflow-x: hidden !important; }
Remember to like and mark this post as the solution if it works for you. It helps others find the answer more easily!