Community Forums › Forums › Archived Forums › Design Tips and Tricks › Possible bug found with Genesis 2.0 and headers
- This topic has 13 replies, 5 voices, and was last updated 10 years, 7 months ago by webcami.
-
AuthorPosts
-
August 14, 2013 at 2:39 pm #56396webcamiParticipant
Hi,
I think I just found a bug with 2.0. I have placed the following code in a few sites to have the header size change with the screen size:
<style type="text/css">@media only screen and (max-width: 783px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(imgurlhere)no-repeat center !important;background-size:contain!important;width:100%!important; } }@media only screen and (max-width: 495px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{imgurlhere)no-repeat center !important;background-size:contain!important;width:100%!important; } }@media only screen and (max-width: 335px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ imgurlhere)no-repeat center !important;background-size:contain!important;width:100%!important; } }@media only screen and (max-width: 255px){ #header{ background-image:none!important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(imgurlhere)no-repeat center !important;background-size:contain!important;width:100%!important; } }</style>
This has resulted in my header image sizing down as the screen sizes down. I place this in the Genesis theme settings under header and footer scripts. It has worked fine until I updated to the latest version - 2.0.
The original header now appears BEHIND the new adjusted headers that appear to overlay. An example link is provided.
http://westseattlewordpress.com/evolveu/August 14, 2013 at 3:17 pm #56413SusanModeratorYou can go ahead and submit a support ticket for that.
August 14, 2013 at 9:23 pm #56451BillParticipantThe div id's changed in 2.0. for instance, #header changed to .site-header
. This will help you compare the differences and change as you need!
http://www.briangardner.com/code/genesis-html5-markup/August 15, 2013 at 9:09 am #56570August 15, 2013 at 9:51 am #56579Brad DaltonParticipantAll CSS code and CSS modifications should be placed at the end of the child themes style.css file and not in the Genesis > Theme Settings > Header and Footer scripts which is used for Google Analytic's tracking and live chat scripts. (javascript)
Your header issue is caused by placing the CSS code in the wrong location.
August 15, 2013 at 10:12 am #56585BillParticipantyes, Brad is right. I missed that in the original support post.. you need to edit style.css, NOT the theme settings area. That is not for style changes to the theme.
thanks Brad.August 15, 2013 at 10:24 am #56591webcamiParticipantGreat. Thanks for you help. It's good to have the link for what changed. I appreciate that.
August 15, 2013 at 10:25 am #56592webcamiParticipanthttp://www.briangardner.com/code/genesis-html5-markup/
This link doesn't work. Is there another?
August 15, 2013 at 10:30 am #56593webcamiParticipantThe div id’s changed in 2.0. for instance, #header changed to .site-header
. This will help you compare the differences and change as you need!
http://www.briangardner.com/code/genesis-html5-markup/This link goes to a 404 page. Can you post the correct link? I'd really like to see the differences for future reference.
August 15, 2013 at 10:57 am #56594Brad DaltonParticipantLearn how to add HTML5 markup and check out the new Genesis HTML5 markup.
Before Entry
XHTML Hook Location - HTML5 Hook Location
genesis_before_post - genesis_before_entry
Entry Header
XHTML Hook Location - HTML5 Hook Location
genesis_before_post_title - genesis_entry_header
genesis_post_title - genesis_entry_header
genesis_after_post_title - genesis_entry_header
genesis_before_post_content - genesis_entry_header
Entry Content
XHTML Hook Location - HTML5 Hook Location
genesis_post_content - genesis_entry_content
Entry Footer
XHTML Hook Location - HTML5 Hook Location
genesis_after_post_content - genesis_entry_footer
After Entry
XHTML Hook Location - HTML5 Hook Location
genesis_after_post - genesis_after_entry
August 15, 2013 at 11:01 am #56595webcamiParticipantThanks a lot!
August 15, 2013 at 11:02 am #56596webcamiParticipantI still get this when clicking that link:
Oops! Not Found, Error 404August 15, 2013 at 11:03 am #56597Brad DaltonParticipantAugust 15, 2013 at 11:04 am #56598webcamiParticipantThanks.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.