Help with Lifestyle responsive header

Community Forums Forums General Discussion Help with Lifestyle responsive header

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  lubsmith47 6 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #99714

    lubsmith47
    Participant
    Post count: 7

    Hi there,

    I’ve installed a full-width banner on the site below. Made some edits to the media queries. It appears the header image is responsive, but there’s white space around it and I’m not sure where it’s coming from. Any one have any thoughts?

    http://www.rjchristiancoaching.com/

    Thanks!
    Julie

    http://www.rjchristiancoaching.com/
    #99824

    Lauren @ OnceCoupled
    Member
    Post count: 616

    Hey Julie,

    That’s due to the min-height specified in your CSS:

    .header-image .site-title a {
         float: left;
         min-height: 300px;  <-- ** This Here **
         width: 100%;
    }

    The only time it is decreased is at:

    @media only screen and (max-width: 767px)
         .header-image .site-title a {
              background: url("http://www.rjchristiancoaching.com/wp-content/uploads/2014/04/rjscherba-header-1024-300x78.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
              background-size: contain !important;
              min-height: 100px !important;
              background-position: center !important;
         }

    You’d want to find all media queries where the width of your content is decreased, then determine what the ideal min-height would be at that point.

    Hope this gets you headed in the right direction!

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #100222

    lubsmith47
    Participant
    Post count: 7

    Thank you Lauren!

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

You must be logged in to reply to this topic.