Font size small/mobile devices Moduls theme

  • tillf

    (@tillf)


    7 years, 7 months ago

    Hi,

    I’m using the “Modulus” theme and wonder how I can reduce the font size of the headings on small devices. The theme neatly reduces its layout if displayed on a smartphone / small screen, but headlines are rendered the same size (48px for h2, only a few characters fit on the screen of my device). I tried changing this in the style.css file using a @media query (added new definitions for h1 .. h5 at the bottom of the file), but this did not work out. I’m no expert in web technologies, so maybe someone can give me a hint?

    Thanks,
    Till

Viewing 2 replies - 1 through 2 (of 2 total)
  • ThemeSumo

    (@themesumo)

    7 years, 7 months ago

    Are you using a media query like this one?

    @media only screen and (max-width: 480px) {
  h1 { font-size: 28px; } 
}

    I’ve tested it on the theme demo and it works fine, if not, please provide a link to your site so I can inspect it further for you.

    Hope this helps.

    Thread Starter tillf

    (@tillf)

    7 years, 7 months ago

    Thanks for the code, it works.

    I think the problem was that I rememberd css syntax in the wrong way… I thought you have to write the elements one-after-another to define the same style to all of them (e.g. “h1 h2 h3”, i.e. without comma). This couldn’t work… :-/

    • This reply was modified 7 years, 7 months ago by tillf.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Font size small/mobile devices Moduls theme’ is closed to new replies.