My Blog

Welcome to My Web Design Blog. Read my thoughts on all things web design.
Categories include SEO, Twitter Bootstrap, Examples of My Work and General Chat.

quality web sites

Full width hero unit – Bootstrap

Posted on the July 3, 2013 Bootstrap

A common problem amongst some bootstrap designers is getting elements on the page to spread to full width when viewed on a mobile device. This is because when a bootstrap site is resized to mobile size (@media max-width 767px), by default, bootstrap adds a 20px margin to the left and right on the body div.

A simple workaround is to add the following code to the element you require to show full width on mobile devices.

We use the hero-unit in this example.

@media (max-width: 767px) { 
.hero-unit { 
margin-right: -20px; 
margin-left: -20px;