Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS for media queries with custom header
Tagged: Magazine Pro, media queries, responsive header
- This topic has 9 replies, 2 voices, and was last updated 8 years, 10 months ago by worldviewpr.
-
AuthorPosts
-
June 10, 2015 at 12:06 pm #155751worldviewprMember
Brad Dalton at WPsite.net helped me implement a http://wpsites.net/web-design/add-full-width-header-image-to-the-magazine-pro-theme/" title="full size header" target="_blank">1140x200 full size header in Magazine pro at
Once that is done I now need help with editing the media queries and break points to help make that header "responsive."
I came across this snip at http://aucoeurdesign.com/how-to-make-a-genesis-header-mobile-responsive/
.header-image .site-title a { background: url(http://MYWEBSITE.com/wp-content/uploads/2014/07/header960.png) no-repeat; height: 100px; width: 960px; }
And tried inserting that in the three media queries of Mag pro css for the three respective media queries.
But it didn't work.
Can someone please share clue on how to edit the Mag Pro media queries to make such a custom header more responsive.
thanks
http://contracostabee.comJune 13, 2015 at 12:03 pm #156110TomParticipantHiya,
Using a background image will not produce a responsive image for your site header. Instead, try this tutorial, "Option 6":
http://keypresswp.com/getting-your-head-around-header-images/#option6The CSS tweaks for Magazine Pro will be similar to those in the tutorial; no media queries are required.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 15, 2015 at 12:23 pm #156287worldviewprMemberThanks Tom
I will check that out. And report back to the thread or for advice.June 15, 2015 at 12:26 pm #156290worldviewprMemberTom, for clarification...when option 6 says "delete current header image set up...
should I remove the changes I made according to this, put back the defaults then
do steps in option 6?
http://wpsites.net/web-design/add-full-width-header-image-to-the-magazine-pro-theme/”
June 15, 2015 at 12:48 pm #156296TomParticipantYes. You should start from the default theme setup, including any related CSS changes you may have introduced from other tuts.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 15, 2015 at 4:24 pm #156312worldviewprMemberHey that worked great, thanks. I still wanted to fiddle with the top and bottom padding but figured it out.
The only caveat I'd add is make clear you use the image from the image folder of theme, not your media library.
SO the same responsiveness should appear in mobile views (iPhone/ipad etc) as well yes?
June 15, 2015 at 6:15 pm #156327TomParticipantGlad you liked the results.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 17, 2015 at 11:49 pm #156624worldviewprMemberTom, I get good results on the desktop at http://contracostabee.com with the 1140x200 image reducing size at jumps but it doesn't look right on an iPhone or other mobile screens. Can you suggest a way to fix this or is the aspect ratio of image just too much for the scaling of the media queries.
June 19, 2015 at 12:36 am #156747TomParticipantYou could fix the Google site verification code error.
You could undo the fiddling you did with the padding.
You may have to add some media query detail around the responsive image, depending on the result you want.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 19, 2015 at 12:01 pm #156813worldviewprMemberThanks, Tom, yeah the google verification code has been deleted from genesis theme settings/header scripts. Don't know why it showed up like that.
The padding is not effecting the way the image is served to mobile screens as I've tried it both ways.
As you correctly surmised, yes I am in need of building media queries that will mitigate the issue and don't have slightest clue except to know I will need to upload different images but don't know how to call to them.
If anyone wants to share her or private go for it, thanks in advance.
bgr
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.