Zoomed-Out Sizing in Twitter Bootstrap

Zoomed-out sizing in twitter bootstrap?

The answer is NO, there is no single, simple way to do this in bootstrap settings, even when recompiling from LESS is on the table.

The crux of the issue is that the bootstrap responsive design works with massive 1200px displays. This makes a 1000px laptop's display look highly zoomed-in.

Editing the less files directly, I reduced font-sizes, reduced the 1200 width and font sizes in..

• variables.less
• media.less
• layouts.less
• responsive-1200-min.less

And it only seemed to break the navbar. My understanding from the bootstrap github is that there is a fair amount more hardcoding than the less variables suggest, and that accounts for much of the problem.

how to make background image zoomed on small devices

Use:

background-size: 150% auto; // Yes background size can be increased more than 100%.

You can use background-position to focus on a certain part.

Twitter Bootstrap Prints In XS

To fix it I did add the following to my CSS

@media print {
  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

This seems to have worked great for me.

Responsive website zoomed out to full width on mobile

Add this to your HTML head..

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

This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

---

Related Topics