Support » Theme: Twenty Thirteen » Trouble with resizable header

  • Resolved waxpop

    (@waxpop)


    Hi, I’m trying to get something like this going on my site – I want the header to resize according to the width of the browser. I’ve tried the code below but it doesn’t seem to affect anything. I do have other mobile-specific rules that are being followed correctly but not this one.

    @media (max-width: 643px) {
    
    .site-header .home-link {
        display: block;
        margin: 0 auto;
        max-width: 1080px;
        min-height: 50px;
        padding: 0 20px;
        width: 100%;
        }
    }

    Alternately, I’d be ok with the header image changing to a smaller image depending on screen width, but nothing happens when I drop the following code into custom-header.php using this tutorial. I’ve also tried dropping this directly into my style.css as well. Nothing changes.

    .site-header {
                background: url(‘http://www.herfiveyeardiary.com/images/arrivingfordinner_header7.jpg’) no-repeat scroll top;
            }
    
            @media (max-width: 999px){
    
                .site-header {
    
                background: url(‘http://www.herfiveyeardiary.com/images/arrivingfordinner_header_MED.jpg’) no-repeat scroll top;
    
            }
    
            }
    
            @media (max-width: 500px){
    
                .site-header {
    
                background: url(‘http://www.herfiveyeardiary.com/images/arrivingfordinner_header_SM.jpg’) no-repeat scroll top;
    
            }
    
            }

    I’m obviously missing something here but I’m not sure what! My site is here.

    One thing I do wonder is how does my CSS interact with the Dashboard > Appearance > Header area? Do I need to set that area to something specific in order for the CSS to work or should my CSS override the settings in that section?

    Help? Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trouble with resizable header’ is closed to new replies.