• Skip to primary navigation
  • Skip to main content

BookingWP™

WordPress Appointment Booking Plugins for WooCommerce

  • Get Appointments
  • Showcase
  • Contact
  • My Account

broken mobile version of our site

Home › Forums › Deprecated › Taverna

Log in
iphonemobilesmartphonetaverna
  • Jonas Schoenfelder
    Customer
    7 years, 4 months ago

    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
    Support
    7 years, 4 months ago

    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
    Customer
    7 years, 4 months ago

    Thank you, that works perfectly!

    Jonas Schoenfelder
    Customer
    7 years, 2 months ago

    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
    Support
    7 years, 2 months ago

    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
    Customer
    7 years, 2 months ago

    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
    Support
    7 years, 2 months ago

    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
    Customer
    7 years, 2 months ago

    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
    Support
    7 years, 2 months ago

    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
    Customer
    7 years, 2 months ago

    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
    Support
    7 years, 2 months ago

    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
    Customer
    7 years, 2 months ago

    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
    Support
    7 years, 2 months ago

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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Follow @bookingwp 900+ followers

  • About
  • Blog
  • Support
  • Terms
  • Privacy

© BookingWP™