CSS for media queries with custom header

[worldviewpr]

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

http://contracostabee.com

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.com

[Tom]

Hiya,

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/#option6

The 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 ]

[worldviewpr]

Thanks Tom
I will check that out. And report back to the thread or for advice.

[worldviewpr]

Tom, 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/”

[Tom]

Yes. 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 ]

[worldviewpr]

Hey 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?

[Tom]

Glad you liked the results.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[worldviewpr]

Tom, 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.

[Tom]

You 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 ]

[worldviewpr]

Thanks, 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

[Author]

Posts