Archived topic
block/container margin - where's it coming from?!
5 replies · Started by Elisabeth on October 5, 2021
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?!
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;
}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.
If Bootstrap is required then that CSS should fix the issue.
Brilliant - sorted now! Thanks again.
Glad to be of help.
