javascript - How to remove extra white space from website when viewed on mobile browser - Stack Overflow

admin管理员组

文章数量:1024664

Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?

Thanks!

My website: fanismahmalat

Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?

Thanks!

My website: fanismahmalat.

• javascript
• html
• css
• space

Share Improve this question Follow edited Feb 27, 2019 at 11:04 PMerlet 2,59444 gold badges2424 silver badges4242 bronze badges asked Jan 17, 2019 at 21:13 Fanis MahmalatFanis Mahmalat 78766 silver badges1313 bronze badges 3

• I checked in Chrome at different window widths - can you be more specific with device/browser and add a screenshot? – DriveItLikeYouStoleIt Commented Jan 17, 2019 at 21:16
• @DriveItLikeYouStoleIt I tried on Samsung mobile in Chrome, and the whitespace appeared! – FZs Commented Jan 17, 2019 at 21:19
• @DriveItLikeYouStoleIt I have a OnePlus3T phone and added screenshot of it. After I scroll the whole page, on the footer, it goes back to normal. – Fanis Mahmalat Commented Jan 17, 2019 at 21:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.

I added the following into CSS in the Chrome inspector and it fixed the issue:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.

The problem is in the image of the laptop that is exceeding in width. https://i.sstatic/zlg6R.png

Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?

Thanks!

My website: fanismahmalat

Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?

Thanks!

My website: fanismahmalat.

• javascript
• html
• css
• space

Share Improve this question Follow edited Feb 27, 2019 at 11:04 PMerlet 2,59444 gold badges2424 silver badges4242 bronze badges asked Jan 17, 2019 at 21:13 Fanis MahmalatFanis Mahmalat 78766 silver badges1313 bronze badges 3

• I checked in Chrome at different window widths - can you be more specific with device/browser and add a screenshot? – DriveItLikeYouStoleIt Commented Jan 17, 2019 at 21:16
• @DriveItLikeYouStoleIt I tried on Samsung mobile in Chrome, and the whitespace appeared! – FZs Commented Jan 17, 2019 at 21:19
• @DriveItLikeYouStoleIt I have a OnePlus3T phone and added screenshot of it. After I scroll the whole page, on the footer, it goes back to normal. – Fanis Mahmalat Commented Jan 17, 2019 at 21:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.

I added the following into CSS in the Chrome inspector and it fixed the issue:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.

The problem is in the image of the laptop that is exceeding in width. https://i.sstatic/zlg6R.png

本文标签： javascriptHow to remove extra white space from website when viewed on mobile browserStack Overflow