-
Hello Zeljan,
we use your “Taverna” theme for our website and everything is good except how it is displayed on smartphones. I tested it with an iPhone 6 and Safari. When I open the website the header image and the overlayed text are cut off in the middle, so only the left side is visible. However all the text below is visible. I can zoom out to see the header image in full width but then thentext below only fills half of the width of the screen. Could you please explain to me how to fix that?
Thank you in advance!
JonasAttachments:
You must be logged in to view attached files.Should be an easy fix. You have two options:
1. Break the Site title word on smaller screens by editing style.css file, line 874:
.site-title { font-family: 'Lora', sans-serif; font-size: 50px; font-weight: 700; line-height: 1.2; word-break: break-all; }
2. Make the Site title smaller on smaller screens by editing style.css file, line 874:
.site-title { font-family: 'Lora', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; }
Hello,
I noticed that the headline isn’t centered anymore. I set the font size to 27 px like this:
.site-title { font-family: 'Lora', sans-serif; font-size: 27px; font-weight: 700; line-height: 1.2;
Can you please explain to me how to fix this? The URL is http://www.friedgarten-brandenburg.de/.
Edit: To make it clear: The headline which is not centered occurs only on big browser windows like on my desktop computer as far as I can see.
I see the headline as centered on my end. Share your browser information and a screenshot, so I can have a clear view of the issue.
Thanks for your fast reply!
Here are some details:
OS: Windows 7
Browser: Chrome v 41.0.2272.118 m
Firefox v 32.0.2Attachments:
You must be logged in to view attached files.Ok, I see the issue now. Because your title is so long and big, 1000px width of your header content is not enough. Either decrease that or make the wrapper (line 1981) wider in style.css file:
@media only screen and (min-width: 768px) .wrap { max-width: 1200px; } }
Perfect, I changed the maximum width to 1200 px and now it works. I still have one question though: On my iPhone 6 (Safari) the second level headline is cut off (see the screenshot). What do I have to change to fix that?
Attachments:
You must be logged in to view attached files.In this case, your title is to long to fit into the screen, so you have two options:
1. Reduce the title font size
2. Break the title letters, when they don’t fit the screenWhich one is better?
If it’s possible I would prefer breaking the letters on small screens. Exampel:
Big screen: Sommergastronomie
Small screen: Sommer-
gastronomieIs that possible?
In that case, edit line 762 in style.css file and add
word-wrap: break-word;
to it:.widget-title { color: #d73200; font-family: 'Shadows Into Light', cursive; font-size: 20px; letter-spacing: 2px; margin-bottom: 28px; text-transform: uppercase; word-wrap: break-word; }
Ok, I did it.
Unfortunately it doesn’t break at the position I would like it to break. So now it is displayed like this on my iPhone:
Sommergastrono
mieinstead of the correct
Sommer-
gastronomieBut I can live with that. Thank you for your fast and capable help.
Greetings,
JonasUnfortunately, you can’t determine the break position, but it should help a bit. Hopefully it works well for you ;)
You must be logged in to reply to this topic.