Responsive Design Header Trouble

Community Forums Forums Design Tips and Tricks Responsive Design Header Trouble

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  Tony @ AlphaBlossom 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #101913

    wolfcoach
    Participant
    Post count: 1

    I’ve set up a web site (www.gemsntreasures.com) with a responsive header image for smaller screens. However, when the screen size shrinks, the original full-sized header image is still showing up and the responsive design elements are appearing behind it.

    I’m having trouble locating the CSS that says “stop displaying the full-sized header when screen size shrinks”. Any help would be appreciated.

    Thanks in advance.

    http://www.gemsntreasures.com
    #101917

    CalliaWeb
    Participant
    Post count: 6

    Hi

    It looks like the full size header image is a background style of .header-image .site-title a, whereas your responsive background images are applied to .header-image .site-header .wrap, so they are being displayed as well rather than instead off.

    Try changing .header-image .site-header .wrap to .header-image .site-title a in your media queries.

    Cheers
    Jo

    #101922

    Tony @ AlphaBlossom
    Participant
    Post count: 544

    Hello,

    In your theme’s styles.css file, towards the end you have several media queries that start with @media only…

    The one that says @media only screen and (max-width: 1023px) has:

    
    .header-image .site-header .wrap {
        background: url("http://gemsntreasures.com/wp-content/uploads/2014/04/header-768.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
    

    Your main image is on “.header-image .site-title a”, so you can either add this to before the rule above:

    
    .header-image .site-title a {
        background: transparent;
    }
    

    Instead of that, I would recommend changing the “.header-image .site-header .wrap” above to:

    
    .header-image .site-title a {
        background: url("http://gemsntreasures.com/wp-content/uploads/2014/04/header-768.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        background-size: contain;
    }
    

    You should change it both for 1023px media query and 767px media query.

    Now instead of specifying the background images in two places (the wrap and the title), you’re just changing the image used in one location (the title).

    Also, the “background-size: contain;” will help keep the background image from being cut off. You will probably want to adjust the height at various browser widths so it’s not so tall with a smaller image. Please note the is not supported by internet explorer 8, so if that’s an issue you’ll have to find another solution (adjust image sizes, jquery plugin, etc).

    I hope that helps!

    Tony


    #101926

    wolfcoach
    Participant
    Post count: 1

    Thank you both – you nailed it!

    …And that’s just one of the problems with copy and pasting from online tutorials :)

    Again, thank you both!

    #101927

    Tony @ AlphaBlossom
    Participant
    Post count: 544

    awesome, glad we could help! Sorry for the double post, Jo’s reply wasn’t there when I started :)


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

You must be logged in to reply to this topic.