Twenty Twelve child theme not loading good on phone.

  • I have a site that has Twenty Twelve child theme. I noticed that the site is not loading properly on my phone. I tried chrome and safari.

    It appears to be my header staying the same size. Any suggestions on making the header image sizable (automatically)?

    iphone view

    • This topic was modified 2 years, 9 months ago by greenpeas.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Add the following custom CSS code in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS:

    Following your theme’s “mobile-first” design approach, this first block of code sets the default width for mobile devices (up to 599px width):

    .site-header img {
width: 300px;
height: auto;
}

    For tablets (ie devices with widths from 600px to 959px, from your theme)

    @media screen and (min-width: 600px) {
.site-header img {
width: 600px;
height: auto;
}
}

    And larger devices (ie devices with widths 960px or more, again, from your theme):

    @media screen and (min-width: 960px) {
.site-header img {
width: 940px;
height: auto;
}
}

    Feel free to change the widths figures (300px, 600px, and 940px) to whatever works best for you, but take into consideration the device widths they’re meant for.

    Thread Starter greenpeas

    (@greenpeas)

    Perfect, thanks. I’ll play around with these.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Twenty Twelve child theme not loading good on phone.’ is closed to new replies.