[Resolved] Responsive Layout – h1, h2,… too big on smartphones

[Franz]

The headings h1, h2 are too big on smartphones.

http://www.klavierspiel.com/smart-simulation.jpg

How can I change this?
I it possible to define the Font-size in em?
would this handle the porblem?

[Tom]

I’m currently looking into the best way to handle this by default.

For now, you can define the sizes for mobile with this CSS:

@media screen and (max-width: 768px) {
      h1 {
            font-size: 30px;
      }
      h2 {
            font-size: 25px;
      }
}

Adjust the sizes to your liking 🙂

[Franz]

Thank you.

[Franz]

How can I define that the smartphone ignores or changes the backgroundimage for the header?

[Tom]

Same kind of thing:

@media screen and (max-width: 768px) {
      .site-header {
            background-image: none;
      }
}

Or:

@media screen and (max-width: 768px) {
      .site-header {
            background-image: url(URL TO DIFFERENT IMAGE);
      }
}

[Franz]

Great, thanks.

[anamoore]

In which version will this be implemented by default?

[Tom]

Not sure, changing things like this to the theme can make some people angry as it will change the look of their website on mobile.

It’s also hard to tell what font size to make these elements, as it depends on your site design, and how long your titles are.

[Author]

Posts