Support » Theme: Twenty Twenty-One » Responsive menu

  • Hello,

    I’m trying to make my website responsive and I see that the H1 titles on mobile are huge. Is there a way to make those titles occupy half on mobile?

    I’m not a programmer, so I would appreciate a simple explanation 🙂

    Kind regards,
    Virginia

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn P.

    (@zoonini)

    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 1 month, 2 weeks ago by Kathryn P.. Reason: fixed typo
    Thread Starter virginiarobles

    (@virginiarobles)

    Hi Kathryn,

    Thanks for your quick response. I figured it was something related to that plugin.

    From what I see there is no option to change on other devices.

    So, what css should I add to make the font smaller on the H1s?

    Thank you

    Moderator Kathryn P.

    (@zoonini)

    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 1 month, 2 weeks ago by Kathryn P.. Reason: fixed typo
    Thread Starter virginiarobles

    (@virginiarobles)

    Thank you for your quick response.

    I tried to add that code in “additional css” and it doesn’t work.

    What I can be doing wrong?

    Moderator Kathryn P.

    (@zoonini)

    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:

    Virginia Gonza lez Experta en Marketing Digital

    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;
      }
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.