Thank you for this tip!
Topic summary
Issue: Header title text is getting cut off on mobile; requester wants to reduce its size.
Proposed fix: Add a CSS media query for mobile (max-width 749px) that decreases the h1/.h1 font size. The suggested rule sets font-size using calc(var(–font-heading-scale) * 2rem), which reduces the heading roughly by a third on small screens. The “2rem” value can be adjusted up or down to fine-tune size.
Implementation details:
- If using the Dawn theme, paste the CSS at the bottom of base.css.
- More maintainable alternative: create a separate custom.css and include it in the theme.liquid header to keep custom code separate from core theme files.
- If not on Dawn, identify the theme or share a site link to locate the correct stylesheet.
Status: Guidance provided; another participant confirmed it helpful. Appears resolved.