Archived topic
15px margins in content container on tablet and mobile
6 replies · Started by Mark on October 16, 2017
Hi Tom
Here's my question:
Are tablet and mobile views supposed to have 15px margins on the left and right side of the content container?
Here's my problem:
On http://www.marksgardens.ca/ I'm experimenting with GP and Toolset integration. I ran into a situation where 15px get added to the left and right margins on the content container. I did some css to remove it, but I'm pretty sure there's something else going on. Its working now, but it adds more lines of css including @media instructions.
In trying to see what was happening I copied the site to my localhost and de-activated all Toolset plugins. Then I built a home page using Beaver Builder, setting my Page Builder Container to full width.
When it sizes to 768px and lower it adds 15px on the content area container margins, left and right. (Header, nav and footer don't get the 15 px added on. Just the content container.)
I've tried to adjust in the customizer, but haven't found a solution there since there are no margin settings there, and padding setting don't do it.
In CSS on my localhost I've targeted the margins...
.full-width-content .container.grid-container {
margin-left: -15px;
margin-right: -15px;
}
This removes the whitespace on the left side, but doesn't effect the right. So my question is:
Are tablet and mobile views supposed to have 15px margins on the left and right side of the content container?
I realize this is focused on a localhost problem, but I think I'm having the same basic problem with the Toolset full width rows on the live site. I would be willing to build a BB homepage on the live site, if that will help.
It looks like Toolset is adding Bootstrap.css to the page, which adds this CSS:
.container {
padding-left: 15px;
padding-right: 15px;
}You can overwrite that with this CSS:
.container.grid-container {
padding-left: 0;
padding-right: 0;
}Awesome. Thanks Tom. Looks like it works on my live site, and my localhost too.
I'm really enjoying using GP with Toolset. Really powerful combination for a non-coder. Experimenting with adding Beaver Builder into the mix.
Awesome! Glad you're enjoying it so far :)
I've got the same issue, but the code provided did not work for my site. It is a private site currently as my company does not want it to be live until all adjustments are made. How can I privately share the site?
You can start a new topic. It gives a website URL field that only admin (myself and Tom) can see :)
Although this topic is 14 months old and I too landed here when researching for a solution for the same problem, this can be easily fixed with a few clicks.
1. Go to Toolset > Settings
2. In the General Tab, scroll down to the "Bootstrap loading" section
3. Select "The theme or another plugin is already loading Bootstrap 3.0"
That's it.
