Hello, I need some help with my mobile version. When I open it in the browser, there is a white gap on the right side, which I want to fix

Technical
1

Hello, I need some help with my mobile version. When I open it in the browser, there is a white gap on the right side, which I want to fix.

2

Hi Sphynx,

Sorry for the delayed reply on this thread.

The issue you’re encountering with side scrolling on mobile devices is likely due to the fixed width of the images exceeding the width of the viewport. Here’s a brief explanation:

  1. Fixed Width Images: When images have a fixed width set, they will maintain that width regardless of the size of the viewport (the visible area of a web page). If the fixed width of the images exceeds the width of the viewport, it causes the excess content to overflow horizontally, resulting in side scrolling.
  2. Viewport Size on Mobile Devices: Mobile devices typically have narrower viewports compared to desktop screens. Therefore, content that extends beyond the viewport width may not display properly and can cause horizontal scrolling.
  3. Setting Images to Auto Width: By setting the width of the images to “auto,” you allow the browser to automatically adjust the width of the images based on the available space within the viewport. This prevents the images from exceeding the viewport width and eliminates the side scrolling issue.

In summary, the issue arises from images with fixed widths exceeding the viewport width on mobile devices, causing horizontal scrolling. Setting the image widths to “auto” allows them to adapt to the available space within the viewport, resolving the problem.

Let me know if facing any other issues.