Device width is not being recognized

donroyco commented 7 years ago

As stated in the index.html file, the website should take the width of the device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

However, when I check the website in Google Chrome Version 58.0.3029.113 on an iPhone 6s, the width is not being recognized (see image below). A horizontal scrollbar is visible.

I'm not sure what's causing this problem, because when I check the website in Google Chrome (desktop) with Developer Tools responsive tool, it's showing the correct width (100% of the device width).

fidget-spinner-chrome

samccone commented 7 years ago

indeed, something is up in safari... still figuring it out. I added autoprefixer thinking that might do it ... but no luck

donroyco commented 7 years ago

True.

The width is still off in Chrome because of this:

#header {
  width: 100%;
  padding: 10px;
}

The width is more than 100%, adding box-sizing: border-box; can solve this problem.

paulirish commented 7 years ago

mmm border-box...

samccone commented 7 years ago

fixed

samccone / fidgetspin.xyz

Device width is not being recognized #6