Header Splits to 2 lines on Tablet

  • Unknown's avatar
    pptherapist · Member ·

    I’m using the Twenty Eleven theme, which looks perfect on my laptop. However, when I switch to my tablet, everything looks good, except the header splits to 2 lines. Is there a CSS code to fix this?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Have you failed to disable the mobile theme at Appearance > Mobile?
    Twenty Eleven is a responsive layout theme. A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    The mobile theme is a completely different theme. When we use a responsive theme we disable the mobile theme Go to > Appearance > Mobile and disable the mobile theme

  • Unknown's avatar
    hallluke · Member ·

    Try adding display:block; to your header image CSS, it should end up looking like this:

    #site-title a {
  background:url('//pptherapist.files.wordpress.com/2014/11/shutterstock_1611845841-e1416858576355.jpg') center left no-repeat;
  padding-left:100px;
  display:block;
}

    The title will split to two lines on smaller screens but the alignment issue will be fixed.

  • Unknown's avatar
    pptherapist · Member ·

    Thank you! That code seemed to fix the problem :-)

  • The topic ‘Header Splits to 2 lines on Tablet’ is closed to new replies.