Ondersteuning » Thema en CSS/opmaak » Responsive heading fonts (h1)

Responsive heading fonts (h1)

  • Z2H

    (@z2h)


    10 jaren geleden

    Beste WordPress’ers,

    Ik heb een issue en ik krijg het niet opgelost, ik maak gebruik van het WordPress heme Enfold, maar dat staat zeer wss los van het probleem.

    Ik heb de H1 op 66px staan, enkel vindt ik dit veel te groot voor op de mobile en tablet views dus wil ik dat die mee schaalt zoals de rest van de de site. Hoe krijg ik dit voor elkaar?

    Dit is de desktop view:
    http://i.imgur.com/8RiyMNW.png

    Dit is de mobile view:
    http://i.imgur.com/HqJn5Al.png

    En dit is de code die ik momenteel in m’n CSS heb staan (die niet werkt):

    @media only screen and (max-width: 480px) { .av-special-heading h1 { font-size: 30px!important; }}

}

@media only screen and (max-width: 480px) { .responsive .container { width: 300px; }}

}

@media only screen and (max-width: 480px) { .entry-content-wrapper .post-title { font-size: 30px!important; }} 

}

h1 { font-size: 66px; }
2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • W.P. Ginfo

    (@wp-ginfo)

    10 jaren geleden

    Het meest voor de hand liggende lijkt mij om in plaats van exacte groottes zoals px, relatieve groottes te gebruiken zoals ‘em’. Zo kan de site maten schalen en rekenen vanaf de default van de device waarop de site getoond wordt.

    voorbeeld:

    *{font-size: 1em;} /*default voor de hele site, ipv 10px*/
h1{font-size: 3em;} /*erg groot*/
h2{font-size: 1.5em;} /*al flink*/
h3{font-size: 1.3em;}

    Hier meer over:
    http://www.w3schools.com/cssref/css_units.asp
    en bijv.

    CSS Font-Size: em vs. px vs. pt vs. percent

    LianneL

    (@liannel)

    10 jaren geleden

    Hoi,
    Zet de default-declaratie voor de h1 een boven de mediaqueries? Nu herroep je de uitzonderingen die je wilt maken voor smallere schermen.
    Succes!
    Lianne

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘Responsive heading fonts (h1)’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven