WordPress.org

Forums

Twenty Thirteen
[resolved] Trouble with resizable header (3 posts)

  1. waxpop
    Member
    Posted 1 year ago #

    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!

  2. WPyogi
    Forum Moderator
    Posted 1 year ago #

  3. waxpop
    Member
    Posted 1 year ago #

    Ahh! I hadn't read that thread since cclambie's post last month. That worked great. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.