Getting the Header to work with Responsive Themes

[CharlieSeymourJr]

Friends,

One of the reasons I just purchased the Education Child Theme is because it's responsive.

HOWEVER... I find the same problem here as with my Agency Theme: it tells me to upload a WIDE jpg for the header which just can't be viewed when on a smartphone or small tablet.

It your "tester," it shows 240 px as the tightest width - and no way will 1140 ?— 120 pixels fit into that. When I tried last week to upload a 240 px wide header, Agency stretched it to the full width and pixilated the image.

SO>>> how can I upload a graphic for the head which works with the Responsive properties of these two Themes? All the examples on StudioPress show narrow titles, but that's not what I find when logging into this newest purchase.

Help?

Charlie Seymour Jr

 

[Brad Dalton]

Nick has a plugin you may find useful. http://designsbynickthegeek.com/plugins/genesis-responsive-header

---

Tutorials for StudioPress Themes.

[rctechs]

Can't you just edit the CSS to swap out the header image using your media queries?  That is what I have used on a site I am working on as I did not want to rely on another plugin.

Sean

[CharlieSeymourJr]

But don't you find this all MADDENING? We spend good money on a new child theme which purports to be responsive but then I either have to add another plugin or edit the CSS?

I've spent 2 days setting this up already and haven't even STARTED on my content because this is taking so long. Hey... I'm not a neophyte with websites: I have 57 of them and keep being told how wonderful Genesis is.

Does this REALLY need to be this difficult?

AND... when I see either the themes I own - Education or Agency - and I drag my browser to be smaller to simulate a cell phone or small tablet, their sample looks great.

Shouldn't EVERYTHING be included when I buy a new theme? And should it REALLY take this long to set up?

Thanks for your help, folks.

Charlie Seymour Jr

[rctechs]

I don't have or use the Agency theme but does it have the following tag as I would like it might work for flexible images.

img {
width:100%;
}


Again not 100% but I think that would work.

Sean

[CharlieSeymourJr]

Sean,

Thanks for sticking with this for me.

Agency, Education, and others are all "Responsive" themes from StudioPress. If one has that, others probably do.

But even though I have 57 websites, not sure where you want me to look for that. I haven't edited the code for my sites in a while - really, that's one of the reasons I just bought Education so I would have to.

IF you can tell me where to look and IF it has that... what do you want me to test?

Charlie

[rctechs]

In the global or the defaults section of the style.css sheet you can see if it is there.  Just open style.css and do a find and look for all instances of img and it should show up if there.  If not there go and add it and see if it works.

Sean

[CharlieSeymourJr]

Here's what I found:

/* Images
------------------------------------------------------------ */

img {
height: auto;
max-width: 100%;
}

 

Have NO idea what you want me to do. That is the only place that looks remotely like that.

Charlie

[rctechs]

Charlie

I appears it is already in the style.css.  The only reason I can think it does not work is because in the style sheet it the logo is set by a background image and not a img tag. I hard code the logo for smartphones and tablets in the css so it changes that way vs using the Responsive Header plugin the others are recommending.  To be honest I am not sure what other way to do it unless you code it to change via media queries or use the plugin which is the easiest if you don't want to hard code it in CSS.

Sean

[CharlieSeymourJr]

Thanks anyway, Sean.

Say... do you know where there are some tutorials to help me set this up. I can hardly believe how tough this is for me today. By this time with my former system, I'd have had 3 websites up and running.

 

Charlie

[rctechs]

The easiest way to do it is use the following plugin, no tutorial. Set it and forget it.

http://designsbynickthegeek.com/plugins/genesis-responsive-header

Other than that hard coding you need to know CSS and if you don't go with the plugin as it is super easy.

Sean

[betsie]

I tried the Genesis Responsive Header plugin but can't get any images uploaded. Does anyone have other suggestions how to get the header image responsive?

Thanks very much!

Betsie

 

[CharlieSeymourJr]

Sean,

Do YOU use http://designsbynickthegeek.com/plugins/genesis-responsive-header ?

All the negative comments on their blog (people really dissatisfied OR saying it doesn't work) has me worried.

Charlie

[rctechs]

I tried it out & it worked as it shuploading did not have any problems with it. I don't use it for most sites amy the people I build sites for are very computer challenged so I don't want them to make changes to the header section.

but it did work when I did tests it out. I had no issues with it.

[Author]

Posts