bootstrap - white margin left & right small devices only

Report · Oct 10, 2017

Is there a quick fix to ensure all containers are spanning entire width of screen edge to edge on small devices?

On phones, there is what appears to be a 5px white margin on left & right sides.

default:

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

Could it be the rows causing this conflict?

The body has nothing: html, body { margin: 0; padding: 0; }

Thank you.

Report · Oct 10, 2017

If you want to span the entire screen width, use .container-fluid.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Oct 11, 2017

I tried wrapping that around the container div... the small screen still has the white.

On one of the containers, I also tried replacing - still gave the white at the smallest screens.

Is there something else I can do with the regular containers? Still not sure why it works fine on the larger screens.

Report · Oct 11, 2017

Assuming you DO NOT have a specific width set on the 'container' you could try giving it negative margins:

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: -15px;

margin-left: -15px;

}

Make sure you have the <body> margin set to 0 as well:

body {

margin: 0;

}

Report · Oct 11, 2017

Change each occurrence of container to container-fluid as per Nancy's suggestion.

<div class="container"> to <div class="container-fluid">

Wappler, the only real Dreamweaver alternative.

Adobe Community