[Resolved] Category Page

[Ashish]

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/

[Tom]

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?

[Ashish]

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.

[David]

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

[Ashish]

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

[David]

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.

[Ashish]

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

[Leo]

Maybe try something like this?

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

[Ashish]

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

[Ashish]

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/

[Leo]

Try changing this:

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

to this:

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

[Ashish]

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

[Leo]

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

[Ashish]

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

[Leo]

No problem 🙂

[Author]

Posts