woocommerce product catalog – fonts too large, cutted for mobiles

Please help me to fix too large fonts at woocommerce shop / product catalog:
you can see it on mobile devices (images are smaller on mobile).
For mobile I can set number of columns only, all other settings are out of control.
Please look at attached screen shots.
I have Basel 5.4.2, but probably it was visible also for older versions.

Attachments:

You must be logged in to view attached files.

Hello,

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/basel/advanced-typography-settings-2/

If you have any questions please feel free to contact us.

Best Regards

Hi
Thanks for fast response.
I think I’ve seen Advanced Typography earlier, but I’ve found only generic Mobile menu and Product category title…
I didn’t found way to set font to mobile category names only.
I think it is generic problem of Basel as I didn’t touch anything related to Mobile settigs.
Best regards

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .cat-design-center div.hover-mask>h3 {
    font-size: 18px;
}

If you need to change something else, please let us know.

Best Regards

I used it, it works!
Finally I set font to 15px.
Thanks very much for help!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts