CODEWITHSUNDEEP
csstwitter-bootstrap
jbarnett
jbarnett

Reputation: 984

Bootstrap site mobile view not using full viewport

I'm currently making a responsive blog using the bootstrap 3.0 framework. I'm using the 1197 Max-width container for my content and it renders fine on desktops. However, when I try opening the site on my phone (I'm using an Android Galaxy Note 2), there is a lot of extra padding on the right and left sides of the viewport. I've tried following the API docs and guides as close as possible, but still can't get this to work.

Here is the site I am working on http://www.justinbar.net

Does anyone know what is going on with this? Am I doing something wrong, or do I need to override default behavior (which sounds a bit hacky to me).

Upvotes: 0

Views: 240

Answers (1)

Maciej Gurban
Maciej Gurban

Reputation: 5739

First, check what's the resolution of that device. I'd assume it's smaller than the biggest, and not perfectly fitting any of the default bootstrap's screen widths.

The padding on the sides appears in cases when your device's screen width is, for example, 800px, and bootstrap's media query defines a layout for 768px. The container width will be 768px at maximum, and if your gutter is bigger than 0, that width of the content will be decreased by the gutter appearing on both ends.

I suggest you take a look at Bootstrap customizer where you can define your own layout breakpoints, and gutter. Just keep in mind that there's a vast number of devices with different resolutions, so you should not aim to fit your layout into one, but make it as fitting and fluid as possible for many devices.

Upvotes: 1

Related Questions