[Jonas Schoenfelder]

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!
Jonas

Attachments:

You must be logged in to view attached files.

[Zeljan Topic]

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;
}

[Jonas Schoenfelder]

Thank you, that works perfectly!

[Jonas Schoenfelder]

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.

[Zeljan Topic]

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.

[Jonas Schoenfelder]

Thanks for your fast reply!

Here are some details:
OS: Windows 7
Browser: Chrome v 41.0.2272.118 m
Firefox v 32.0.2

Attachments:

You must be logged in to view attached files.

[Zeljan Topic]

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;
	}
}

[Jonas Schoenfelder]

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.

[Zeljan Topic]

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 screen

Which one is better?

[Jonas Schoenfelder]

If it’s possible I would prefer breaking the letters on small screens. Exampel:

Big screen: Sommergastronomie
Small screen: Sommer-
gastronomie

Is that possible?

[Zeljan Topic]

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;
}

[Jonas Schoenfelder]

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
mie

instead of the correct
Sommer-
gastronomie

But I can live with that. Thank you for your fast and capable help.

Greetings,
Jonas

[Zeljan Topic]

Unfortunately, you can’t determine the break position, but it should help a bit. Hopefully it works well for you ;)