Responsive Header size help, Lifestyle Pro

[rbarnes]

I am using Lifestyle pro theme and have a header graphic that is 1060 x 177

http://hamburgersquare.com/

It looks great on large and small displays but the middle range gets cut off on either end. You can see it using this, which I just discovered and love btw,

http://www.studiopress.com/responsive/

The 150+ lines of code under..
" @media only screen and (max-width: 767px) { "
seems to be where I might look but this blows my little mind. I've made a 800px and a 600px version but really dont know its this is the right path to follow.

Your help and advice is appreciated.

-Randy

[lanwide]

Randy,
Is this something you have viewed on and ipad in landscape or portrait view?
media queries are where the magic happens, however it's hard to know where the break points will happen if you are just resizing your browser window down.

[rbarnes]

This is showing the bad graphic on a ipad mini landscape view, and on Nexus7 landscape. It looks good on a portrait display.
thanks.

[rbarnes]

the problem seems to be screen sizes between 1023px and 768px

-rb

[rbarnes]

The nice support folks answered me with the code below, but that doesnt give me the full size header on a computer screen it just keeps the small one at every screen size.

I'll keep looking for and answer and will post it here if I can ever find one.

-rb

=================

You will want to look for this code in your style.css file:

.header-image .site-title a {
float: left;
min-height: 160px;
width: 100%;
}

and change to this:

.header-image .site-title a {
background-size: contain !important;
float: left;
min-height: 177px;
width: 100%;
}

.Don't forget to save your changes
===============

[TheresaSh]

Hi Rbarnes
There is definitely a problem with making the header and footer responsive? It says the theme is responsive? If you get an answer to your query let me know - it seems we all get referred to the same experts with mixed results - for instance have you tried:
http://prettydarncute.com/2013/10/genesis-full-width-header-tutorial/
http://thepixelista.com/responsive-genesis-child-theme-logo/
http://keypresswp.com/getting-your-head-around-header-images/

Genesis Responsive Header Customizer Update

I happen to be using the news pro theme and still no success with this

I am going to post it where I see news pro theme and see if I can get an expert coder as the lack of ability to change from a logo to a header on these themes is driving me nuts!!

[Author]

Posts