[Resolved] Category Page

Home Forums Support Category Page

Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #1442849
    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/

    #1443230
    Tom
    Lead Developer
    Lead Developer

    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?

    #1443396
    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.

    #1443813
    David
    Staff
    Customer Support

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

    #1444012
    David
    Staff
    Customer Support

    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.

    #1444416
    Ashish

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

    #1444432
    Leo
    Staff
    Customer Support

    Maybe try something like this?

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

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

    #1445095
    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/

    #1445889
    Leo
    Staff
    Customer Support

    Try changing this:

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

    to this:

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

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

    #1446324
    Leo
    Staff
    Customer Support

    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;
    }
    #1446585
    Ashish

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

    #1447323
    Leo
    Staff
    Customer Support
Viewing 15 posts - 16 through 30 (of 30 total)
  • The topic ‘Category Page’ is closed to new replies.