Header for mobile… again. :)

  • I’ve been working all morning on trying to get my custom header to be responsive for mobile. One of my issues is I don’t want to use the tag line as built in to the theme. I’ve built it into the header graphic. So here are my questions:

    Can I upload an alternative image for mobile only and have it appear only on mobile devices?

    And if so, can I also have it use the built-in tag line only for mobile?

    I’m just thinking since the built-in tag is already responsive, and I’m using the built-in title, which is responsive, I don’t care so much if my header image isn’t responsive as long as the text in the header is.

    Thanks so much for any help! FYI my site is https://www.fixitplan.com.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Please make sure your website link is correct.

    Thread Starter Julie Meek

    (@jam0614)

    Hi Andrew. It is correct, did it not work for you?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes it did not work for me.

    Doesn’t work for me either.

    Firefox can’t find the server at https://www.fixitplan.com.

    Thread Starter Julie Meek

    (@jam0614)

    Hmmmm, that’s strange. It works for me in both Mozilla and IE and on a second computer.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try talking to your hosting providers about this.

    Thread Starter Julie Meek

    (@jam0614)

    I cleared the cache on two different computers, and also went to it on my phone and on my Kindle. When I click the link above it takes me right to the site.

    I had a hiccup with it last night where I couldn’t go to it, and then suddenly it cleared up. I wonder if it’s something intermittent?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I wonder if it’s something intermittent?

    You have the time log at when your site didn’t work from this thread, so there’s the information you can give to your hosting providers.

    Your site works now btw

    Hi, @jam0614, to get back to your original questions:

    Can I upload an alternative image for mobile only and have it appear only on mobile devices?

    And if so, can I also have it use the built-in tag line only for mobile?

    Yes, it’s very easy to do using CSS and media queries. You just have to decide, though, at what viewport width you want to make the change. That is, mobile devices (tablets & smartphones) come in varying widths. The style sheet for TwentyThirteen has media queries (which change the appearance of the page based on viewport size) for the following widths: 1599px, 1069px, 999px, 767px, 643px, and 359px. The 643px width is probably a good width to pick; that’s when the menu changes into a drop down list.

    So what you would first do is add a site description (AKA tagline) to the header by going to Settings from the admin dashboard.

    Then add this CSS to your child theme’s style.css file:

    #masthead .site-description {
   display: none;
}
@media (max-width: 643px) {
   #masthead .site-description {
      display: block;
   }
   .site-header {
      background-image: url(https://www.fixitplan.com/wp-content/uploads/2013/11/mobile_header.jpg);
   }
}

    The first rule hides the site description by default.

    The media query comes right after that. When the width goes below 643px, then the site description gets displayed. The background image for the site background also gets changed to the file you list in the url property.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Header for mobile… again. :)’ is closed to new replies.