Category thumbnails text not aligned well

This topic has 17 replies, 3 voices, and was last updated 2 years, 3 months ago ago by Olga Barlow

  • Avatar: tuijatuulia
    tuijatuulia
    Participant
    October 24, 2021 at 18:15

    Hi,
    I’m using categories to show subcategory thumbnails when you click a category. I would like to use for subcategories, style “Title with backround” https://prnt.sc/1x8r5xz
    but the text is not centered, and leaks when there is a bit longer text, like this, picture from mobile view:
    https://prnt.sc/1x8rtuc

    I also got a note from customer that why amount of products is in larger text than category name – this is the case when sub category has a long name. Maybe the product amount text could be reduced to maximum same as category text, so that it does not look a bit funny, because that is just additional info, and main info is the name of the category.

    I also noticed that in mobile view if category is empty, there is an empty space shown in mobile, could that be trimmed please?

    16 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 25, 2021 at 08:45

    Hello,

    Please provide URL of the mentioned page.

    Regards

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    October 25, 2021 at 14:18
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 25, 2021 at 14:23

    Hello,

    Use the next custom CSS code:

    .category-grid .categories-mask .count {
        font-size: 11px;
    }
    .category-grid .categories-mask h4 {
        font-size: 14px;
    }
    .category-grid.style-with-bg .categories-mask {
        padding: 14px 5px;
    }

    Regards

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    November 18, 2021 at 13:09

    Hello, this seems not to work like expected totally. Especially mobile view looks odd (there are empty spots and text is not centered or font smaller to fit)
    Here some examples of mobile view of page (see private)

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 19, 2021 at 14:19

    Hello,

    It looks that your test site is down. Did you move that anywhere?

    Regards

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    November 23, 2021 at 13:30

    Hi, sorry I had a cyber attack to my website, it was solved in 30 minutes.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 23, 2021 at 18:07

    Hello,

    Add the below code to Theme Options > Custom CSS

    @media only screen and (max-width:992px){    .product-category.columns-5:nth-child(5n+1) {        clear: unset;    }}
    
    @media only screen and (max-width:480px){    .category-grid.style-with-bg .categories-mask {        zoom: 0.8;    }}

    Regards

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    November 26, 2021 at 15:16

    Hi, Sorry, this did not help the mobile view.
    There are still empty spots (where there should be a category) and we noticed that
    – the white box is not in center, it is a bit on the left for left column items and on the right for right side items.
    – the text is not centered, and also the amount of products is not centered either.

    The empty slots /spots is the most difficult thing – it is the same when I use text below the picture (picture from production: http://www.villeriina.net/kaikki-kategoriat/ )
    – is there a solution for this?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 29, 2021 at 12:55

    Hello,

    I don’t see that you added the mentioned code.
    Provide us with WP Dashboard access to check and help you.

    Regards

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    December 2, 2021 at 16:24

    Hi, sorry I missed the font changes. I did those, and made the font even smaller. Now
    – the box still is not in center (would be easier not to notice if the white box would be until edges.. on the left it is a bit to the left and on the right it is a bit on the right..
    – there are still a lot of empty slots – why are they showing?

    br,
    Tuija

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    December 2, 2021 at 16:27

    and the access..

    Please contact administrator
    for this information.
    Avatar: tuijatuulia
    tuijatuulia
    Participant
    December 2, 2021 at 16:37

    and you can access the mobile view like this

    Please contact administrator
    for this information.
    Avatar: tuijatuulia
    tuijatuulia
    Participant
    December 2, 2021 at 16:57

    You can observe the same situation (empty categories) also here on mobile.
    I noticed that for some reason, every 5th or 10th category is not shown on it’s place, and it’s thumbnail is a little bit more on the left than others. This repeats with next 10.

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 3, 2021 at 10:44

    Hello,

    I have added below code to child theme style.css of the test site.

    @media only screen and (max-width: 1200px){
        .template-container .product-category.columns-5:nth-child(5n+1) {
            clear: none;
        }
    }
    
    @media only screen and (max-width: 767px){
       .template-container .product-category.category-grid.columns-5 {
            width: 50%;
        }
        .template-container .product-category.category-grid.columns-5:nth-child(2n+1) {
            clear: both;
        }
    }
    @media only screen and (max-width:480px){
        .category-grid .categories-mask {
             zoom: 0.8;
        }
    }

    Check now.

    Regards

    Avatar: tuijatuulia
    tuijatuulia
    Participant
    December 7, 2021 at 16:10

    Thank you – looks good!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 7, 2021 at 17:28

    Hello,

    You are welcome.

    Regards

  • Viewing 17 results - 1 through 17 (of 17 total)

The issue related to '‘Category thumbnails text not aligned well’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.