Mobile View Shifts to left leaving a blank white space. Please Help!

Store Design
, , , , ,

Topic summary

A Shopify store is experiencing a mobile layout issue where the page shifts left, creating unwanted white space on the right side. An image was shared showing the problem on mobile view.

Proposed Solutions:

Multiple developers suggested similar CSS fixes targeting the overflow issue:

  • Add overflow-x: hidden to html and body elements within a media query for mobile screens (max-width: 749px or 600px)
  • Set width: 100vw on these elements to prevent horizontal scrolling
  • Use !important flags to ensure the styles override existing rules

Implementation Methods:

  1. Add code to Custom CSS section (Theme > Customize > Theme settings)
  2. Edit base.css file directly and append the code at the end

Several responders requested the store URL to provide more specific assistance. The issue appears to stem from fixed-width containers or images not adapting properly to mobile viewport dimensions.

Status: Multiple solutions offered, awaiting user confirmation of which approach resolved the issue.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Tanay12_0-1721183046961.png
Tanay12_0-1721183046961.png377×566 114 KB

2

Can you please share your store’s URL ?

3

Hi @Tanay12

You can solve it by adding this code below to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}
4

Hi @Tanay12 ,
This is Polo from MS Web Designer.
I would love to assist you with your query. Please share the store URL.

If you have any doubt, please feel free to ask.

Regards
Polo

5

Hello @Tanay12
The white space appears due to the fixed width of the container or images. To fix this, simply assign a max-width value of 100% to the container. If this doesn’t resolve the issue, please refer to the code below. If you provide your store URL, I can assist you further.

@media only screen and (max-width: 600px){
body { overflow-x: hidden; }
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

6
  • Here is the solution for you @Tanay12
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media (max-width: 749px) {
html, body { 
width: 100vw !important;
overflow-x: hidden !important;
 }
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.