Hello imonlyhappywhenitravel,
For mobile devices you need to decrease the font size with the help of below css-
@media all and (min-width:0px) and (max-width: 360px) {
.site-title {
font-size: 0.74em !important;
}
}
I hope the above was helpful.
Kind regards,
Manoj
@imonlyhappywhenitravel – would you consider putting spaces in your site title? i.e. “i’m only happy when i travel” That would solve the problem of random line breaks on smaller screens.
If the lack of spaces is a desired effect, you can certainly try a media query, as @phpexpert21 suggested. I set the breakpoint to 700px as that’s where I start to see the title split onto multiple lines:
@media screen and ( max-width: 700px ) {
h1.site-title {
font-size: 0.74em;
}
}
p.s. phpexpert21 – you don’t need to specify (min-width:0px) – the max-width is enough. It’s also good practice to avoid using !important in CSS wherever possible, as it can cause a cascade effect and make it difficult to override other elements later. Usually, it can be avoided by making your selector more specific. In this case, adding an h1 to the selector does the trick.
Thread Starter
srnb
(@imonlyhappywhenitravel)
@phpexpert21 and Kathryn, thank you for your support. I added Kathryn’s suggestion to the css with !important note on mind but I didn’t see any change on android-samsung:
imonlyhap
pywhenitra
vel
and iphone:
imonlyhapp
ywhenitrav
el
Can you try clearing the browser cache on your devices, and if you’re running any caching software on your site, try clearing the server cache there as well? It sounds like the CSS you added is not being applied. When I look at your site on my iPhone 5s, it is being applied, and the font is much smaller.
Thread Starter
srnb
(@imonlyhappywhenitravel)
Yes I see it now Kathryn, thank you.
