Community Forums › Forums › Archived Forums › General Discussion › Genesis theme – using a full width header
Tagged: full width header, Genesise
- This topic has 5 replies, 2 voices, and was last updated 10 years, 1 month ago by kathiemt.
-
AuthorPosts
-
March 4, 2014 at 11:46 pm #93479kathiemtParticipant
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.
Kathie Thomas
March 5, 2014 at 12:07 am #93481Brad DaltonParticipantWorked 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.
March 5, 2014 at 12:18 am #93483kathiemtParticipantYes, 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:
Kathie Thomas
March 6, 2014 at 4:49 pm #93764kathiemtParticipantI 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.
Kathie Thomas
March 7, 2014 at 1:55 am #93815Brad DaltonParticipantLooks ok to me.
You could make the entire header background black so its blends in perfectly with your image.
You'll find the Media Queries at the end of your style sheet.
/* 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/[email protected]) 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%; } }
March 7, 2014 at 2:38 am #93817kathiemtParticipantOk, 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.
Kathie Thomas
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.