Page Margins and Padding

[Mike Buzzell]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

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?

[Tom]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

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

[Tom]

Can you link me to the page possibly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

http://www.pc.solutions/

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.

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

Thank you! This works perfectly.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts