Skip to main content
R
r_tist
Inspiring
October 10, 2017
Question

bootstrap - white margin left & right small devices only

  • October 10, 2017
  • 2 replies
  • 2597 views

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.

    This topic has been closed for replies.

    2 replies

    R
    r_tistAuthor
    Inspiring
    October 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.

    O
    osgood_
    Legend
    October 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;

    }

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 10, 2017

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

    Nancy O'Shea— Product User & Community Expert
    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices