Highlighted

bootstrap - white margin left & right small devices only

Enthusiast ,
Oct 10, 2017

Copy link to clipboard

Copied

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.

Views

1.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

bootstrap - white margin left & right small devices only

Enthusiast ,
Oct 10, 2017

Copy link to clipboard

Copied

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.

Views

1.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 10, 2017 0
Adobe Community Professional ,
Oct 10, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2017 0
Enthusiast ,
Oct 11, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2017 0
LEGEND ,
Oct 11, 2017

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2017 1
Adobe Community Professional ,
Oct 11, 2017

Copy link to clipboard

Copied

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

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2017 1