Archived topic
Page Margins and Padding
9 replies · Started by Mike Buzzell on January 11, 2015
Hi Tom, Hope all is well. I am trying yo eliminate a 30px space above and below the content in each of the pages I am creating in the template for my site as well as making the page color black. Can you advise as to where I should be doing this? I have a child theme for the template and have applied the following in the child theme style.css:
/*for pages-content*/
.page-content,
.entry-content,
.entry-summary {
margin: 0 0 0 0;
background: #e3e3e3;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 1px;
padding-left: 1px;
}
When I add a video media player to page the spacing appears ( approx 30px above and below the player ) and the background color is white not black. I have modified everything I could think of but can not get this resolved.
Any help will be greatly appreciated.
Thanks,
Mike
Hi Mike,
Couple options..
The first one is to wrap your video in a class built into the theme.
Like this:
<div class="ignore-xy-spacing">
Your video in here
</div>That class will tell the video to ignore the padding.
You can also take the padding away from all content with this:
.inside-article {
padding: 0;
}Hope this helps :)
Hi Tom,
I found this post by searching. What I'm looking to do is have the featured image on a single post ignore the padding of the containing div. However when I added the padding CSS, it did not work for me. Is it possible for me to add the class "ignore-xy-spacing" to the featured image div?
Hi there,
That's currently not possible, but I'm working on it as I'd like this as a Customizer option.
For now, adding this function should do it: https://gist.github.com/generatepress/b252781fe296fe698b9e
Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/
Hi Tom,
Thank you for the reply. I was able to edit the function so that only the post image on the single page has no padding. However, the right padding seems to persist. I have confirmed that the width of the div containing the image is 100% and that the width of the image is sufficiently wide to fit the entire page. Not sure where I'm messing up.
Thank you,
Nick
Can you link me to the page possibly?
I have the padding enabled on the main page which works for well, but if you go into any of the posts, you'll see what i'm talking about.
Interesting, not sure what's going on there.
Try adding this CSS:
.separate-containers .inside-article .page-header-image-single {
width: calc(100% + 80px);
max-width: 5000px;
}Thank you! This works perfectly.
You're welcome :)
