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

  • 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)
  • 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

    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.