Category Page

That did not add the borders I was looking for. Added -> padding: 0.5em; to the code and it seems to work in the desktop view. But the borders stick for the tab and mobile view. Also, the Category Title is out of the box. I want to get it in the box.

.category-item img {
border: 1px solid #ddd;
margin-bottom: 5px;
padding: 0.5em;
}

Page link: https://hetalkamdar.com/recipes-index-gui/

What do you mean by "the borders stick"? I'm not seeing anything obvious.

Do you want the category title to be in its own box?

In the Categories - the ones that are retrieved from the short code, if there are 3 columns, the border between the images are sticking. I need a small gap between these borders. The borders are working perfectly when using ShowPosts below in “Street Food”. (See image below)

https://ibb.co/3zF7dNJ

Yes. Category title to be in its own box. Currently, it is out of the box below the image.

Try updating your CSS to this:

.category-item {
    padding: 10px;
    width: calc(33% - 15px);
    box-sizing: border-box;
    text-align: center;
    margin-left: 10px;
}
.category-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}

That worked well. Now the box can be seen with the borders in all the 3 modes.

The title of the Image still needs to be within the box. Please help with that. Thanks a ton.
Ashish

You can change the font-size using this CSS:

@media(max-width: 600px) {
    .category-item h5 {
        font-size: 14px; /* adjust size to suit */
        word-wrap: normal;
    }
}

Overall the issue you will have is that the smaller mobile devices aren't wide enough for 3 columns. A 2 column option would remove a lot of these problems.

you're absolutely correct David regarding having just 2 columns for smaller devices. How do I do that in this case?

Maybe try something like this?

@media (max-width: 768px) {
    .category-item {
        width: calc(50% - 15px);
    }
}

Works like a charm now Leo. It's perfect now. Thank you Leo, David, and Tom for all the help here.

Just overlooked the title that's not appearing within the box. Can You please help me with that last bit here? Thanks so much.
https://hetalkamdar.com/recipes-index-gui/

Try changing this:

.category-item img {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    padding: .5em;
}

to this:

.category-item {
    border: 1px solid #000;
}

that took the title inside but the padding on the top and bottom is gone.

Have you tried playing around with the margin property in your existing CSS here?

.category-item {
    padding: 10px;
    width: calc(33% - 15px);
    box-sizing: border-box;
    text-align: center;
    margin-left: 10px;
}

Yes Leo, that did the trick. Thank you for the hint. You guys are awesome and Im so glad to choose GeneratePress.

No problem :)