WordPress.org

Forums

Twenty Thirteen
Header for mobile... again. :) (10 posts)

  1. Julie Meek
    Member
    Posted 1 year ago #

    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 http://www.fixitplan.com.

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Please make sure your website link is correct.

  3. Julie Meek
    Member
    Posted 1 year ago #

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

  4. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Yes it did not work for me.

  5. WPyogi
    Forum Moderator
    Posted 1 year ago #

    Doesn't work for me either.

    Firefox can't find the server at http://www.fixitplan.com.

  6. Julie Meek
    Member
    Posted 1 year ago #

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

  7. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Try talking to your hosting providers about this.

  8. Julie Meek
    Member
    Posted 1 year ago #

    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?

  9. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    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

  10. CrouchingBruin
    Member
    Posted 1 year ago #

    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(http://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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic