Going wider
October 30, 2013
Like most users in the brave new world, I use wide-screen monitors. My laptop sits at 1680×1050 and my desktops are full HD, 1920×1080 pixels. So naturally, when I’m building using Twitter Bootstrap 3, whose display is designed for mobility and then for the screen with a maximum resolution of 1200 pixels wide, I’m left with a lot of useless white space.
That was until I found a helpful stack exchange post that pointed me in the right direction and I ended up creating this simple additional CSS file that you can toss into your project.
.container {
max-width: 1570px;
}
}
@media screen and (min-width: 1900px) {
.container {
max-width: 1870px;
}
}
I called it bootstrap.wide.css and dumped it in my css folder. Then when I want to build something that uses up more than the 1200 pixels, I now just call on it by adding this code to my page:
Easy peasy! Next I’m going to try some nested menu/columns.
Update: Bootstrap 3.0.3 requires a slight change, from max-width to width and I’ve added an extra level for the MacBook Air resolution.
.container {
width: 1370px;
}
}
@media screen and (min-width: 1600px) {
.container {
width: 1570px;
}
}
@media screen and (min-width: 1900px) {
.container {
width: 1870px;
}
}
Leave a Reply