Entire website has white margin on its right side in Mobile view

Question

I have tried to

set body and html width to 100% !important
checked the viewport which has the correct value

width=device-width,initial-scale=1,shrink-to-fit=no

so I run out of ideas about what's next to check.

Could someone enlighten me please.

update My question is marked as duplicate of this question and ask me to explain it, okay here we go:

As you can see that if I added this code

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

I will have a huge white gap between hero image and my next section, and the Top Notch section gone missing.

Possible duplicate of [White space showing up on right side of page when background image should extend full length of page](https://stackoverflow.com/questions/4617872/white-space-showing-up-on-right-side-of-page-when-background-image-should-extend) — Kamalesh M. Talaviya, Apr 25 '19 at 12:18

score 2 · Accepted Answer · answered Apr 25 '19 at 11:53

2

Your viewport is scaled when you resize browser window, so adding user-scalable=0 will solve that problem. (at present when you press ctrl+0 it solves the issue)

Replace your viewport with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">

answered Apr 25 '19 at 11:53

Joykal Infotech

1,840
3
9
17

It solves the problem! thanks ~! Now could you please explain why adding : height=device-height, maximum-scale=1, user-scalable=0 makes it work??? thanks! – Franva Apr 25 '19 at 12:06
1

your current meta does not include `user-scalable=0` so when you resize browser window it does not scale properly because it is unable to properly detect the device. meta viewport tags are to detect the device and render page accordingly – Joykal Infotech Apr 25 '19 at 12:09
in more detail you can refer [here](https://css-tricks.com/snippets/html/responsive-meta-tag/) It would be helpful if you accept the answer. Thanks ! – Joykal Infotech Apr 25 '19 at 12:14
1

for sure! This is the 1st solution :) thanks a lot~! – Franva Apr 25 '19 at 12:16
hi Joy, "user-scalable: Allows the device to zoom in and out. Values are yes or no." It doesn't mention anything about detect the device. Could you please explain why it works in the way you mentioned before??? – Franva Apr 25 '19 at 12:26
1

"A viewport element gives the browser instructions on how to control the page's dimensions and scaling." from [w3school](https://www.w3schools.com/tags/tag_meta.asp) my explanation of detecting device was about meta tag not specifically `user-scalable` and I tried to explain it in a easy way, but not official terms. – Joykal Infotech Apr 25 '19 at 12:37
appreicated :) I will note it down – Franva Apr 25 '19 at 12:52

score 0 · Answer 2 · answered Apr 25 '19 at 11:52

It looks like your browser view port issue. When we change port without refresh it looks like you have shared but when we open in the same port it works fine. Also i have tested in online simulator working fine. Check this http://www.responsinator.com/?url=vibeshtml.dharansh.in%2F

Thanks

score 0 · Answer 3 · answered Apr 25 '19 at 12:03

I have noticed in your you are using "row" class and then in "col-*" classes you are making "p-0". The ideal way to achieve is if you dont want gutter space, then apply "row no-gutters" with "row" class and remove "p-0" from all col classes. At times, this problem also causes issues of space across different views.

Entire website has white margin on its right side in Mobile view

3 Answers3