Your site looks fine on my iPhone. What specifically is wrong with the main title header?
Well that’s good news! What iphone & browser are you using?
Can you see the screenshot here? https://www.dropbox.com/s/gwrj6jzaz0pcy5p/IMG_2092.PNG?dl=0
Not sure if I have the share settings correct.
But essentially the main title/header is superimposed over the post title. Looks like a mess on my device and two of my coworkers’.
Are you looking at it horizontally or vertically?
After looking at your screenshot, I see what the issue is. I’m looking at it on an iPhone 6 Plus, which explains it.
If your theme has a built-in custom CSS option, use it; otherwise, get a custom CSS plugin and put:
@media screen and (max-width: 649px) {
.site-title {
font-size: 26px;
}
}
This code will make your site title smaller, only if the browser is a maximum of 649 pixels wide.
Cool. Could I do percentage max width instead of pixel? I’m kind of a novice sorry.
You could set a maximum width on the site title’s containing element, but you’d probably still want to change the font size so the title itself doesn’t overflow the container.
@media screen and (max-width: 649px) {
.site-branding {
max-width: 75%;
}
.site-title {
font-size: 26px;
}
}
Great, thank you. Going to try this!
