White space right from page on small screens only (Safari on desktop and Chrome on mobile phone)

Related searches

There is a white space on the right side of every page on my website. This white space only appears when the screen width is smaller than 767 pixels so it must be one of the media queries causing it but I can't find the cause. I tried changing widths and overflows on the body element aswell as the #top element, .header element and #menu element. I suspect one of those to cause the problem but I'm puzzled. Strangely this only happens on Safari on my desktop, but on my mobile phone it also happens on Chrome.

See this website on a smaller screen width.

Does anyone have any useful insights?

Please check the image u are using a "row" there remove that. That was there is a horizontal scroll showing

Mobile Safari (Whyyyy?!) - Engineering Blog, When scrolling down the page in iOS Chrome, the “Get Tickets” button would disappear further up the screen. Only when scrolling was� Hello. I have a responsive site with an issue: there is a 10px/20px gap on the right hand side of the site, but only appears when on a mobile device (iphone, ipad, android etc), but there is no issue when viewed on a desktop browser or in Chromes web developer extensions' Responsive layouts.

Please add Css

@media (max-width: 767px){
   html {overflow-x: hidden;}
 }

Take control of your scroll: customizing pull-to-refresh and overflow , Use cases include disabling the pull-to-refresh feature on mobile, Scrolling is one of the most fundamental ways to interact with a page, but certain so popular that mobile browsers like Chrome on Android have adopted the same effect. on iOS (when Safari implements overscroll-behavior ), and more. If Safari displays a blank page or quits on your iPhone, iPad, or iPod touch If you can't load a website or webpage, or Safari quits unexpectedly, follow these steps. Connect to a different network

IT because you didn't follow bootstrap framework...When ever you use row you must use col after that like <div class="row"></div class="col-sm-12">

In above case you use row in header but after that you didnt use col add col div after row OR use

.header {
    overflow: hidden;
}

Well-Controlled Scrolling with CSS Scroll Snap, However, JavaScript based solutions fall short of providing a full fidelity Chrome, Opera and Safari are shipping the latest specifications with the Snapport is the area of the scroll container to which the snap areas are aligned. the snapping algorithm can be smart about when and how it snaps given� We all know that we need a web browser like Google Chrome for accessing the internet. But sometimes you might face the issue of “Blank Pages” in Google Chrome. Basically whenever you open the browser you might see a completely blank page (white screen) with either no address in the address bar or a “about:blank” written in the address bar.

Fix Internet Browser Display Issues, Close all browser screens (or re-start your computer), and then re-open only Navigator Configure the Pop-Up Blocker^ in your browser (IE, Firefox, Chrome, Safari), To see menu in top frame, ensure scroll-bar on right is at top of page. Empty Browsing Cache and Cookies in Safari on Mac; Pop-Up Blocker in Safari on� For those of you who don't know yet, Safari has a nasty bug that can lead to any page on your website becoming eventually invisible if your server correctly responds with a 304 under some circumstances. Go ahead, google it, you'll find the entire test case and you'll see a lot of people complaining about it since last year. There were a few

The Safari Browser Settings You Should Tweak Right now, Get the most out of your Safari browsing on iOS and macOS with through these Safari tweaks to make your life online a little smoother. 1. Safari here and here, but some of our favorites include Space (and Window to Left of Screen or Tile Window to Right of Screen to do just wireless phone charger. My daughter touched a few keys and suddenly my screen shrunk in about 1" on the left and right margins of the screen. I still have my regular desktop background, but the sides are black for about 1" in on each side, squashing up the screen icons.

Then you get white space on either side of the page that forces you to another site if your mouse pointer slips off the scroll bar. (sometimes, the area is grey or black, depending on the site).

Comments
  • In which browser?
  • Using Safari only, but also on Chrome on my mobile phone. The other browsers actually don't show this white space (forgot to mention, I'm editing my post now)
  • I'm using a platform that has themes so I did not know this. Thanks for noticing! I'm changing it right away.
  • This is the absolute cause of the white space, rather than using html{overflow:hidden); I have changed this and it solved the issue for good.
  • This did the trick on both desktop and mobile, thanks a lot! :D