Genesis theme – using a full width header

Community Forums Forums General Discussion Genesis theme – using a full width header

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  kathiemt 9 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #93479

    kathiemt
    Participant
    Post count: 124

    I’ve created a full width header image of 1139 x 164 as per http://wpsites.net/web-design/add-header-image-logo-to-genesis-2-0-sample-theme/ however I find when viewing the site on a tablet it doesn’t view the full header, just a portion. Can’t view the header at all on my phone.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    http://ajpprofessionalcleaningservices.com.au/home/
    #93481

    braddalton
    Participant
    Post count: 10679

    Worked perfectly for me.

    I just added the image to the images folder and changed the Genesis > Theme Settings > Header > Image Logo

    Didn’t add any CSS as the theme already includes Media Queries.

    If you want anything different, you may need to modify the Media Queries.


    #93483

    kathiemt
    Participant
    Post count: 124

    Yes, I’ve done exactly the same. Haven’t edited css at all. Just uploaded the image at that size as the logo.png. So I can’t figure out why the logo is not resizing for phone or tablet. Rest of the site does.

    This is what I see on the phone:



    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #93764

    kathiemt
    Participant
    Post count: 124

    I don’t know what media queries is Brad, but still experiencing this same view on my phone. I’ve refreshed and it’s showing all other up to date changes on the site, but still has this reference to Genesis Framework instead of the logo. It shows up fine on my tablet and on the computer browsers, just not on my phone.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #93815

    braddalton
    Participant
    Post count: 10679

    Looks ok to me.

    You could make the entire header background black so its blends in perfectly with your image.

    AJP Professional Cleaning Services

    You’ll find the Media Queries at the end of your style sheet.

    [css]
    /*
    Media Queries
    —————————————————————————————————- */

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    .header-image .site-header .wrap {
    background: url(images/logo@2x.png) no-repeat left;
    background-size: 320px 164px;
    }

    }

    @media only screen and (max-width: 1139px) {

    .site-inner,
    .wrap {
    max-width: 960px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    width: 740px;
    }

    .content,
    .site-header .widget-area {
    width: 620px;
    }

    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content,
    .content-sidebar-sidebar .content {
    width: 400px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar-primary,
    .title-area {
    width: 300px;
    }

    }

    @media only screen and (max-width: 1023px) {

    body {
    background-color: #fff;
    }

    .content,
    .content-sidebar-sidebar .content,
    .content-sidebar-sidebar .content-sidebar-wrap,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar-content-sidebar .content,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-primary,
    .sidebar-secondary,
    .sidebar-sidebar-content .content,
    .sidebar-sidebar-content .content-sidebar-wrap,
    .site-header .widget-area,
    .site-inner,
    .title-area,
    .wrap {
    width: 100%;
    }

    .site-header .wrap {
    padding: 20px 0;
    padding: 2rem 0;
    }

    .header-image .site-header .wrap {
    background-position: center top;
    }

    .site-inner {
    padding-left: 5%;
    padding-right: 5%;
    }

    .archive-description,
    .author-box,
    .comment-respond,
    .entry,
    .entry-comments,
    .entry-footer .entry-meta,
    .header-image .site-header .widget-area,
    .sidebar .widget,
    .site-header {
    padding: 0;
    }

    .genesis-nav-menu li,
    .site-header ul.genesis-nav-menu,
    .site-header .search-form {
    float: none;
    }

    .genesis-nav-menu,
    .site-description,
    .site-header .title-area,
    .site-header .search-form,
    .site-title {
    text-align: center;
    }

    .genesis-nav-menu a,
    .genesis-nav-menu > .first > a,
    .genesis-nav-menu > .last > a {
    padding: 20px 16px;
    padding: 2rem 1.6rem;
    }

    .site-header .search-form {
    margin: 16px auto ;
    margin: 1.6rem auto;
    }

    .genesis-nav-menu li.right {
    display: none;
    }

    .entry-footer .entry-meta {
    margin: 0;
    padding-top: 12px;
    padding-top: 1.2rem;
    }

    .sidebar .widget.enews-widget {
    padding: 40px;
    padding: 4rem;
    }

    .site-footer {
    padding: 24px 0;
    padding: 2.4rem 0;
    }

    .footer-widgets {
    padding: 40px 5% 16px;
    }

    .footer-widgets-1 {
    margin: 0;
    }

    }

    @media only screen and (max-width: 767px) {

    .five-sixths,
    .four-sixths,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fourths,
    .three-sixths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    margin: 0;
    width: 100%;
    }

    }
    [/css]


    #93817

    kathiemt
    Participant
    Post count: 124

    Ok, thanks for the suggestion Brad. What kind of phone are you viewing with? I’m wondering if it’s my phone. I’ve had someone else say they can view it fine on their phone. I have an HTC Desire S.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

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

You must be logged in to reply to this topic.