Responsive menu

Hi @virginiarobles!

Looks like the default font styles in this theme are being overridden by your Easy Google Fonts plugin, where it looks like you’ve set an 80px size site-wide, overriding the theme’s responsive styles:

h1 {
 color: #000000;
 font-family: 'Darker Grotesque', sans-serif;
 font-size: 80px;
 font-style: normal;
 font-weight: 500;
 letter-spacing: -2px;
 line-height: 0.8;
 text-decoration: none;
}

By adding one set size without any adjustments for mobile, it’s going to be 80px everywhere, including small screens.

I would suggest first checking in that plugin’s settings and see if it has any built-in options to set a different size for smaller screens. If it doesn’t, then we can look at adding some more CSS code (the type of code above that controls font sizing, among other things) if necessary.

Let me know how it goes!

• This reply was modified 5 months, 1 week ago by Kathryn P.. Reason: fixed typo

Sure, this custom CSS will reduce the 80px size on screens smaller than 482px, which is the theme’s smallest breakpoint:

/* h1 on smaller screens */
@media screen and ( max-width: 483px ) {
  h1 {
    font-size: 40px;
  }
}

Of course, feel free to adjust any of those values as you prefer.

• This reply was modified 5 months, 1 week ago by Kathryn P.. Reason: fixed typo

I see the problem. Your Google Fonts plugin is loading its styles after the custom CSS coming from the Additional CSS editor, meaning that the plugin’s styles will always override Additional CSS. See here:

To get around that, you’ll need to add an !important to the font-size line. It’s something we try to avoid, but when a plugin is doing something like this, it’s necessary.

/* h1 on smaller screens */
@media screen and ( max-width: 483px ) {
  h1 {
    font-size: 40px !important;
  }
}