[Resolved] block/container margin – where’s it coming from?!

[Elisabeth]

I’ve got a staging site I’m working on and on the home page I’ve got the header, banner image and footer all working how I want. However, the block above the footer, with a dark purple background image as the block background, is showing a margin about 20px wide on both left and right despite both page and block being set to ‘full width’.

I keep going through all the settings for the block and the page and I can’t work out where it’s coming from… Putting link below.

Can you help?!

[David]

Hi there,

your site is loading boostrap.css which is adding this CSS rule:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left:auto
}

Which effects the GP .container element ie. adding 15px to either size.

Ideally you would want to remove bootstrap from the equation ( it loads a LOT of CSS and will have several conflicts ).

If you cannot then you can add this CSS to remove the padding:

.site.container {
    padding: 0;
}

[Elisabeth]

Okay… I have a suspicion this may be getting added to my site by Toolset as the rest of the site is a fairly ordinary GP and GB set up as I’m normally used to doing and which I know fairly well.
I’ll check that with their support before removing anything in case there are settings I can tweak to get shot of that.
Thanks v much as always. I’ll leave this as unresolved for now but will mark it up when I’ve fully sorted it.

[David]

If Bootstrap is required then that CSS should fix the issue.

[Elisabeth]

Brilliant – sorted now! Thanks again.

[David]

Glad to be of help.

[Author]

Posts