Custom text - make larger on desktop.

Store Design
, ,

Topic summary

A user wants to increase text size on desktop while keeping mobile sizing unchanged for their Shopify store (phreshcareco.com.au).

Solutions Provided:

  1. CSS in theme.liquid: Add custom CSS code above the </body> tag in the theme.liquid file with media queries targeting desktop screens.

  2. Custom CSS section: Use a media query @media (min-width: 990px) to apply font-size: 120px to h2 elements only on desktop.

Both approaches use CSS media queries to selectively apply larger font sizes based on screen width, ensuring mobile displays remain unaffected. The discussion appears resolved with working solutions provided.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hey guys,

Hoping you could help, I wanna make the text in the screenshot larger on desktop. But keep it the same size on mobile.

Url - www.phreshcareco.com.au

Screen Shot 2024-08-15 at 4.24.09 pm.png
Screen Shot 2024-08-15 at 4.24.09 pm.png1010×517 163 KB

Any help you be greatly appreciated.

2

Hey @Phreshcareco

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723703422683.png
Moeed_0-1723703422683.png1887×286 53.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @Phreshcareco

You can do that by adding this code to Custom CSS of that section

@media (min-width: 990px) {
h2 { font-size: 120px; }
}