Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Pro need help with responsive header image
- This topic has 6 replies, 2 voices, and was last updated 9 years, 1 month ago by addiesgram.
-
AuthorPosts
-
March 6, 2015 at 1:50 am #143408addiesgramParticipant
The site: http://toreyricelmft.com
I'm working on creating a responsive header image. After uploading my header image (logo.png) to the images folder I started by commenting out "Add support for custom header" in the functions.php file:
/** Add support for custom header */ /* add_theme_support( 'genesis-custom-header', array( 'width' => 1140, 'height' => 120 ) ); */
Then I added this code to the end of the functions.php file:
/** * Filter the genesis_seo_site_title function to use an image for the logo instead of a background image * * The genesis_seo_site_title function is located in genesis/lib/structure/header.php * @link http://blackhillswebworks.com/?p=4144 * */ add_filter( 'genesis_seo_title', 'bhww_filter_genesis_seo_site_title', 10, 2 ); function bhww_filter_genesis_seo_site_title( $title, $inside ){ $child_inside = sprintf( '<a href="%s" title="%s"><img src="'. get_stylesheet_directory_uri() .'/images/logo.png" title="%s" alt="%s"/></a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ) ); $title = str_replace( $inside, $child_inside, $title ); return $title; }
Then added this to the styles.css file:
.site-description { display: none; } .site-header { padding: 0px; } .title-area { width: 100%; } .site-title a, .site-title a:hover { background: transparent; } .site-title img { vertical-align: top; } h1.site-title { margin-bottom: 0px; }
And per today's update (3-6-15) on the keypress website, I commented out this css code:
/* .site-header { padding: 20px 0; } .site-header .title-area, .site-header .widget { padding: 0 20px; } */
This is working except that some part of the title area (?) is showing below my image (bottom of my image is the white area with red text reading TEST AREA). I'm stuck here and don't know how to correct this one last stumbling block. I'd really appreciate some help with this.
http://toreyricelmft.comMarch 6, 2015 at 10:15 am #143444emasaiParticipantAdd max-height: 300px to .site-header.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 6, 2015 at 1:22 pm #143472addiesgramParticipantThanks so much for your help Lynn. Interesting -- when I added your max-height code to the styles.css file nothing changed, but when I added it in the Freeform CSS box in Design Palette Pro, it worked. I'm curious about why and if this an OK solution? And should I just leave the code in the styles.css file?
March 6, 2015 at 1:29 pm #143474emasaiParticipantThe custom css in Design Palette Pro overrides the original style sheet. It doesn't make any difference if you leave it in the stylesheet or not, but for neatness you can remove it as it serves no purpose. Please mark this subject as Resolved
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 6, 2015 at 1:42 pm #143475addiesgramParticipantWill do, but -- I just discovered that while the code works in desktop view, it is not working on my iPad. I don't have a smartphone so can't check it right now. Any thoughts on further refinements?
Edit: That 'extra' piece of header area appears again at a certain point as I'm resizing the browser window (both Firefox and Safari). It disappears again as the window size gets smaller.
I'm thinking maybe this approach to responsive header images is a little too unpredictable/unreliable?
March 6, 2015 at 2:20 pm #143480emasaiParticipantWell you have to add the extra styling for mobile responsive to remove the extra space into your Media Queries. As I code directly to the style.css and do not use Design Palette Pro, I cannot tell you exactly how to do that.
Media Queries are designed for specific widths, 1024, 768, 480 pixels, you just need to change the 1024 if that resolves the issue as it will cascade down. The max-height may be specified at lower widths.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 6, 2015 at 3:00 pm #143485addiesgramParticipantIn Design Palette Pro (with the Freeform CSS plugin), you can add css to one of four boxes with the following headers:
This CSS will apply site-wide.
This CSS will apply to 480 px and below.
This CSS will apply to 768 px and below.
This CSS will apply to 1024 px and above.Initially I added the code you gave me:
.site-header { max-height: 300px; }
to the site-wide box. That resolved the issue in desktop view and I believe in smaller mobile view. I then added the code to the "768 px and below" box but the unwanted piece of header is still showing. I'm not sure where to go from here. I can work with the styles.css file so if you have another suggestion I could try adding it directly in styles.css.
Thanks again for your help with this. I'm so close, I really hope I can make this work.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.