Hello everyone,
I have an issue with some CSS. It happened when I tried modifying a few things, but also when creating new blocks, it is only appearing on mobile. Can you guys help me troubleshoot this?
Here is the link to my website :
Can you be more specific? Is it on every page or on specific ones?
And from your screenshot, it looks like it is from admin. Have you checked on the frontend?
Your issue is something with the whitespace on the right side. You can either simply make it overflow hidden.
Or you can either select the theme in the Ai theme Code Editor shopify app. Write the prompt of the issue and then save it.
You can input this Prompt if you want.
I have a CSS/layout issue that only appears on mobile.
After making some CSS changes and creating a few new theme blocks, the page now has horizontal overflow. On mobile, the content extends beyond the right edge of the screen, causing horizontal scrolling (see attached screenshot).
Your task is to:
Find the exact CSS or Liquid code causing the horizontal overflow.
Inspect all recently modified sections, custom blocks, and global CSS files.
Check for common causes such as:
width: 100vw
Fixed pixel widths
Negative margins
Absolute positioning
Elements translated outside the viewport
Large padding/margins
Grid/Flex layouts exceeding 100%
Images or containers without max-width: 100%
Identify the specific element causing the overflow using browser inspection (don't just hide it with overflow-x: hidden).
Fix the root cause while preserving the desktop layout.
Explain exactly what caused the issue and which files were modified.
Do not use overflow-x: hidden as a workaround unless absolutely necessary. The goal is to remove the element causing the overflow, not hide the symptom.
The screenshot is attached for reference.
You can attach the screenshot as well with the Ai theme Code Editor.
Hey there! that white space on the right side of your mobile view is a classic horizontal overflow issue it happens when one of your new custom blocks, an image, or a text container has a width that is physically wider than the mobile screen, this forces the entire page to scroll sideways, to patch this quickly, you can force the page to hide the overflow. You just need to go into your theme’s code, open your main stylesheet which is usually called base.css or theme.css, and paste this right at the very bottom: body, html { overflow-x: hidden; }this clip off anything extending past the screen edge and get rid of the white bar immediately, however, the absolute best way to fix the root cause is to find the exact element that is stretching the page, great developer trick for this is to temporarily add { border: 1px solid red !important; } to the bottom of your CSS file,then you view the site, every single element will have a red box around it ,you can just scroll down the page and see exactly which red box is breaking out into the white space once you identify the culprit, you can adjust its specific padding or width fit properly on mobile, and then simply delete the red border code..l