Return to previous page

Category thumbnails text not aligned well

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

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?

#306384 Copied Theme version: 8.0.8 WooCommerce version: 5.8.0

16 Answers

Rose Tyler

Support staff

October 25, 2021 at 08:45

Hello,

Please provide URL of the mentioned page.

Regards

#306420 Copied

tuijatuulia

Participant

October 25, 2021 at 14:18

here you are : https://test.villeriina.net/tuotekategoria/hemmottelu/

#306464 Copied
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
#306466 Copied
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.

#309123 Copied

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

#309256 Copied

tuijatuulia

Participant

November 23, 2021 at 13:30

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

#309606 Copied
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
#309652 Copied
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?

#309959 Copied

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

#310185 Copied

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

#310732 Copied

tuijatuulia

Participant

December 2, 2021 at 16:27

and the access..

Please contact administrator
for this information.

#310733 Copied

tuijatuulia

Participant

December 2, 2021 at 16:37

and you can access the mobile view like this

Please contact administrator
for this information.

#310738 Copied

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.

#310740 Copied
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
#310793 Copied
tuijatuulia

Participant

December 7, 2021 at 16:10

Thank you – looks good!

#311153 Copied

Olga Barlow

Support staff

December 7, 2021 at 17:28

Hello,

You are welcome.

Regards

#311174 Copied
Tagged: category thumbnails, optimization, templates, text alignment, woocommerce, wordpress
Viewing 17 results - 1 through 17 (of 17 total)