Styling category pages

Hi there,

Try this:

.blog.separate-containers .inside-article, .archive.separate-containers .inside-article {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    transition: all .25s;
}
.blog.separate-containers .inside-article:hover, .archive.separate-containers .inside-article:hover {
    -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}

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

Thank you, Leo. But it seems there are some padding issues.

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

Any chance you can link us to the site in question?

There you go.

What's the padding issue you are referring to?

There's no white space anywhere.

Have you looked at the examples I linked to? That kind of structure would be ideal.

I've managed to add padding to everything inside the box. However, I want to exclude the featured image. Any ideas?

Sorry still not quite sure if we are looking at the same issue.

There is no padding around the featured image as far as I can tell.

No, the code you gave me has only affected the category pages. You can find them on the menu.

(BTW, please remove the image when we're done 🙂)

Try adding this as well:

.wp-show-posts-inner {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    transition: all .25s;
}
.wp-show-posts-inner:hover {
    -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}

That looks great. But the main question is — how do I add padding to the title and the text without affecting the featured image?

Hi there,

make sure you have the Blog Module activated. In Customizer > Layout > Blog --> Featured Images ( Archive Tab ) you can remove the padding from images.

I don't want the images to have padding, only the content.

Yes - follow these steps:

1. Set you padding in the Customizer > Layout > Container. You can also set the layout to separate containers and adjust the separating space between containers.

2. Customizer > Layout > Blog –> Featured Images ( Archive Tab ) and UNCHECK the Display padding around images