Minimize space between category description and article

Hi William,

You can try change the separate containers to one container at customizer > layout > container.

Or you can try this CSS:

.archive .page-header, .blog .page-header {
    padding-bottom: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)

Thanks so much, Ying. That helped. If I wanted to minimize the space even more, is there a way to do that or is 0 the lowest number?

I made a screenshot to help you understand the paddings/margins:
https://www.screencast.com/t/bHWSxrZHj

So the page-header has60px padding (green) all around which is set in the customzier > layout > container > content paddings and 20pxbottom margin (orange) by default.

We used CSS to set page-header 's bottom padding to 0, now there's 20pxbottom margin left.

If we want to remove the bottom margin, we can add 1 more line to the previous CSS, so it becomes this:

.archive .page-header, .blog .page-header {
    padding-bottom: 0;
    margin-bottom: 0;
}

Besides, the article container also have 60pxpadding all around. We can use CSS to override the top padding:

.archive article.post .inside-article, .blog article.post .inside-article {
    padding-top: 20px;
}

By the way, for padding, 0 is the lowest number, but for margin, you can go negative.

Thank you, Ying. You are always so helpful. It is very appreciated.

If I want to minimize the space between the articles on my homepage: https://gearthrone.com would I use a similar CSS code?

Hi william,

If you want to have 2 separate setting for the blog page and archive page you can split their CSS settings.

Example: Say, you want 0 padding for blog page, and 10px padding on archive pages.

body.blog article.post .inside-article {
    padding-top: 0;
    padding-bottom: 0;
}

body.archive article.post .inside-article {
    padding-top: 10px;
    padding-bottom: 10px;
}

Thank you, Elvin!

Last question relating to the homepage. if I want to minimize the space between the featured image and the title of the post as shown in this image:

https://imgur.com/Z2KLd0r

I there a way to do that with CSS?

Thank you.

Hi there,

try:

.post-image-above-header .inside-article .post-image {
     margin-bottom: 1em;
}

Thank you, Ying, Elvin, and David!

Glad we could be of help