Product Category Page Title > change size for mobile devices

Hello Woodmart team, how can I customize the font size of the product category page title for mobile devices?

On my screenshot you can see that some of the titles are very long and then the whole menu or header is destroyed. How can I either
– change the font size for mobile?
– or insert a code for hyphenation?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.woodmart-archive-shop .wd-page-title .title {
      font-size: 25px !important;
     hyphens:auto !important
    }

This will reduce the font size on mobile devices and allow long words to break properly to prevent layout issues.

Best Regards.

Hello, thank you very much for your fast response.

Just to be sure, there is no solution to adjust the font size for the mobile view, via the theme settings?

Thanks & best regards

Hello,

In the Theme Settings, you can change the only font size in this situation, You can adjust the font settings by navigating to Theme Settings > Typography > Advanced Typography, and creating a new rule for the “Page title” item.

For detailed instructions, please refer to the documentation:
https://xtemos.com/docs/woodmart/advanced-typography-settings/

If you want to change the font size only on mobile devices, Try to Use Theme Presets to apply conditions for mobile devices:

Go to Theme Presets and select the “Is mobile” condition. https://ibb.co/yR89vmL

Then go to the Theme Setting of this preset and apply the typography settings.

Check our article about theme presets – https://xtemos.com/docs-topic/theme-settings-presets/

Best Regards,

Thank you for your help. I managed to get the font size right.

But I still have the problem that – on mobile devices – the header or header image on the shop category pages moves downwards, see screenshot. How can I adjust it so that it does not move downwards?

Attachments:

You must be logged in to view attached files.

Hello,

Now I have checked your site and the image in the page title is showing fine now.

See Screenshot for clarification: https://ibb.co/rKwsVVt7

Check back on your site and check the issue. If you have any questions feel free to contact us.

Best Regards,

Hi Aizaz, thanks for your fast reply. Yes, I changed the header height from 60 to 90px . Was this the right way to solve this issue?

Thank you very much.

Best regards

Hello,

Yes, the issue was indeed related to the header row height. By increasing it to “90px”, you’ve allowed the elements to fit properly, which resolved the problem. This is the correct solution, and everything should now display as expected.

If you need further assistance or have additional questions, feel free to contact us anytime.

Best Regards,,

Thank you very much Aizaz for your very fast response!

You can close this ticket, thanks for your help.

Hello,

You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts