WordPress tips & tricks – site title er for stor på mobil

Hvis du ligesom jeg selv har lavet dit eget WordPress site med template, plugins und alles og så har opdaget at din site title er for stor, når du tilgår siden fra en tablet eller mobil, så er her hjælp at hente.

Du kan selvfølgelig vælge at bruge et billede som header i stedet for en site title, men altså – jeg vil hellere have title og tagline øverst, for det synes jeg ser pænere ud.

Nå, men som du kan se på billedet herunder, så er site title for stor, hvilket betyder at den kører alt for langt ud til højre og forsvinder ud af billedet. Det ser selvfølgelig ikke særlig pænt ud, så det skal fikses, men hvordan?

Site title for stor på mobil før

Du skal ind i dit Custom CSS og tilføje en kodesnip. Og bare rolig – det lyder langt sværere end det egentlig er. Du finder dit Custom CSS ved at klikke dig ind fra dit kontrolpanel:

Klik på Udseende, så på Tilpas og gå så helt ned i bunden af listen til du finder Custom CSS. Klik på Custom CSS og kopier følgende ind i det tomme felt:

@media screen and (max-width: 520px){
.site-branding .site-title a {
font-size: 30px;
}
}
@media screen and (max-width: 420px){
.site-branding .site-title a {
font-size: 22px;
}
}

OBS – Det er en god idé at kopiere koden, da du ellers risikerer at glemme en tuborg-klamme. Det skete for mig og det resulterede i at jeg simpelthen ikke kunne få det til at virke! Hvis du gør det rigtigt, kommer dit site til at se således ud på mindre skærme. Nu ændrer site titlen altså størrelse efter, hvilken skærm du er på 🙂

Site title på mobil efter

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *