Changing the header image size responsively

Community Forums Forums Design Tips and Tricks Changing the header image size responsively

This topic is: not resolved

This topic contains 6 replies, has 4 voices, and was last updated by  MJG108 1 year, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #58097

    Jeff Hester
    Participant
    Post count: 28

    I’m doing dev work with the new Going Green 3.0 theme. I want to use an image for the header which is preset to 340 x 70 pixels. I know I can change this (I did it on the old version of the theme) but is there a way to use media queries to display different sizes of the logo based on the media query?

    Right now it looks fine at the mobile/tablet sizes, but a little small on the desktop sizes.


    #58182

    Robin
    Participant
    Post count: 323

    Sure. Set your main logo in the main part of the stylesheet as normal. Then add a new rule in the relevant media query sections. So I just did a site that looks like this:

    Main section of stylesheet:
    .header-image .title-area {
    background: url(images/logo.png) center no-repeat;
    background-size: 500px 150px;
    padding: 0;
    }

    Media Query:
    @media only screen and (max-width: 767px) {
    .header-image .title-area {
    background: url(images/logo-mobile2x.png) center no-repeat;
    background-size: 320px 150px;
    }
    }

    HTH


    I do the best I can with what I’ve got. (say hey on twitter)

    #58352

    MJG108
    Participant
    Post count: 14

    Can you do the same thing for header right? I have a banner that moves under my logo when I go into tablet and mobile size.

    #58381

    Robin
    Participant
    Post count: 323

    You can do the same thing for any of it. I will mess around with layouts using the Chrome Developer tools or Firebug until I have what I want, then put it in my own code. Good luck!


    I do the best I can with what I’ve got. (say hey on twitter)

    #58467

    Eric Alexander
    Participant
    Post count: 8

    I know it is yet another plugin, but, Genesis Responsive Header (CAN) load different headers for different widths. CSS is leaner, but sometimes it is best to insure the logo looks good small and important things like phone numbers get enlarged so they very visible. I think it is awesome to ensure the branding looks good small and the phone numbers get large enough to see with alternate headers.

    http://designsbynickthegeek.com/plugins/genesis-responsive-header

    BUT that being said, I am going to try the CSS approach. That will let me dump another plugin.


    #58751

    MJG108
    Participant
    Post count: 14

    Thanks for the info. I’ll play around with it in Chrome Dev.

    #58760

    MJG108
    Participant
    Post count: 14

    It worked! It took me a little bit to find the header-right widget area in style.css, but once I found it. I just added the following code to the tablet and mobile area in media queries.

    .site-header .widget-area {
    display: none;
    }

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

You must be logged in to reply to this topic.