Change font size on mobile view ONLY? simple theme

Store Design
1

Hi all, i’ve been messing with the code of my simple theme and am realizing some edits I made aren’t gracefully carrying over…

one thing that’s happening is a font size i changed looks great on desktop, but way too large on mobile view— Here’s the code I wrote to change the font size of this section; it used to be “$font-size-header * .85”, but i increased that multiplier to make my header bigger:

h2 {
  font-size: em(floor($font-size-header * 4));
}

I just don’t know what to add to specify mobile view edits only if I want to make this header smaller on phone-view? thanks in advance for the help:)

2

Hi @garnish-gurl

Would you mind sharing your store’s URL so we can see what the CSS breakpoint is set for mobile? We will then provide you with a solution for that.

Cheers!

3

Hi there,
Jack from OpenThinking here!

Wrap your code inside a media query like so:

@media (min-width: 600px) { h2 { font-size: em(floor($font-size-header * 4)); } }

(if you want you can change 600px to match your theme’s mobile media query break point)

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.