How to remove padding of the featured image but leave it for the container text?

Hi,

It’s hard to tell what’s going on without seeing the actual site.

By default, There’s no padding being added directly to the featured image container.

Can you explain a bit further? Screenshots would help greatly in this. Thank you.

Hey @ejcabquina, thanks so much for your comment, and so fast!

Here’s the link: https://ibb.co/MSTmmLL

So what I would like to do is just remove the blank space between the featured image and the container, on the top, left and right.

If I add the following code, I am able to solve this partially:

.post-image-above-header .inside-article .featured-image {
margin-top: -50px !important;
margin-right: -50px !important;

}

However, the image still doesn’t go to the left side. If I try adding left margin, it just centers itself.

Image: https://ibb.co/WcW5Qbv

Ah right,

The issue with that is, as mentioned previously, there’s no padding being added to the featured image container.

That space you’re seeing is added to the container of post contents, article.post .inside-article which is the parent/container of .post-image which holds the featured image.

While you can add this CSS to remove the padding completely:

article.post .inside-article{
padding: 0px;
}

This will also remove the left and right space for the excerpt area.

Now if you want to keep the padding for the excerpt area, you’ll have to do something like this:

/* remove container padding */
article.post .inside-article{
padding: 0px;
}
/* Re-add the padding for excerpts only */
.entry-summary{
padding: 0px 40px;
}

Also, if I add margin then the featured image looks weird on mobile screen.

Hey @ejcabquina,

Thanks greatly for your comment, the code unfortunately didn’t solve the problem. What happened was the padding completely removed for the whole post. I would like padding to be removed for the featured image while remain for the rest of the post.

I’ve added this code:

/* remove container padding */
article.post .inside-article{
padding: 0px;
}
/* Re-add the padding for excerpts only */
.entry-summary{
padding: 0px 40px;
}

Is there a way to remove the padding for the featured image but make it stay for the text and the rest of the post?

Thank you!!

I was able to solve the problem!!

The solution already existed if you go to Customizer > Layout > Blog > Featured Image, and then just uncheck ‘Add Padding to Featured Image’. Awesome!!

That’s why I like GeneratePress so much!!

However, this actually added a second problem now for me, and it’s that the blank space between the sidebar and the main content somehow increased. Now I need to find a solution for this. I will create a new thread for this. @ejcabquina if you’re able to, I would deeply appreciate your help!!

Here’s my question (I also created a separated thread for it):

For some reason after I added “no padding to featured image”, the free space between the content and the sidebar increased. I can only solve this if I change container width to much lower, but I would like to have the same container width of 1200px, and not lower.

This is how it looks: https://ibb.co/1J67FpX

And this is how I would like it to look: https://ibb.co/2FgkKk1 (minimal blank space in between)

How can I remove this blank space between the content and the sidebar, without changing the container width? I would like to increase the size of the content.

Any help would be greatly appreciated!

EDIT: For some reason I’ve found that this extra space occurs only on the archive blog posts page and not on the single posts.

• This reply was modified 4 years ago by awesomeblogger.

Glad you find a solution that works for you. No problem. ??