Welcome to Our Blog. Read our thoughts on all things IT & Web Dev related.
Categories include SEO, Twitter Bootstrap, Examples of Our Work, IT Support 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;