Bootstrap not scaling properly on mobile devices

Question

I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of. It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine. Here are my meta tags ``` ``` Here are some pictures since I'm not overly sure I'm being clear. Vertical Orientation: https://i.stack.imgur.com/Cifzw.jpg Horizontal Orientation: https://i.stack.imgur.com/2Dxu2.jpg The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S

Accepted Answer

The inner elements of the grid may have a fixed width more than the mobile screen size. Check the CSS of the elements to find the one with the overflowing width.

You can use media queries to fix the width issue. Like below

```
@media (max-width: 320px) {
.element {
      width: 90%;   
     }
}  
```

Bootstrap not scaling properly on mobile devices

Solution

Problem