How to modify header to show up better in Agency Responsive mode

[alanaburton]

On the website http://www.weeklyclean.co.uk I have uploaded a banner 960 x 115px wide as recommended but when looking at it on an iPhone the banner doesn't show up well as most of it is missing to the right so it seems like it has not been resized.

I want the logo to the left and price/number to the right and am potentially happy for the logo to come first and then the price/number to show up underneath if the whole banner won't be resized but I tried to cut them up, upload half the banner with logo on into the header and then upload then right hand side and add as an image to the header right widget but that looks worse as the right hand side widget almost drops it down to not be in line.

Any advice on how to get it show up properly in responsive mode without needing to cut it up?

Thanks,

[alanaburton]

Is there any feedback at all? I understand Agency is supposed to be one of the themes that is responsive so to have it show up correctly on the iphone would be good!

 

Thanks

[Tony @ AlphaBlossom]

Hello,

There's several ways to do what you want, but without changing your image or your setup, the only thing I can think of is to add "background-size" to your #header background image.

So in your child-theme css (or custom css), you'd add the following to your #header css:

background-image: contain; (or background-image: 100%)

Some problems with this method - you might have some issues with browser support (ie8 and below, etc), and at smaller resolutions some of your image text might be unreadable/too small.

Maybe a better way is to use a different background image for different resolutions, so depending on the device/resolutions viewing your website, your viewers would see the background image that is intended for that resolution.

Another idea is to put the phone number and price in a header widget, and when it gets below a certain size, use css to position the widget below the text part of the logo. With this method you'd still have to make some changes to your images for it to work right.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[MoodyRiviera]

Tony, when you say:

"Another idea is to put the phone number and price in a header widget, and when it gets below a certain size, use css to position the widget below the text part of the logo. With this method you’d still have to make some changes to your images for it to work right."

I had no idea that was possible. Is there a tutorial somewhere that shows how to do that?

 

[alanaburton]

I agree with MoodyRiviera - is there any step by step outline for that? As a suggestion - should it not be something built into the Agency theme as standard given that it's supposedly a responsive theme or do we need to work with the set up a bit better to get things showing correctly by default? I'm happy to follow instructions for the CSS changes but ultimately it would be nice if a responsive theme was actually responsive - the Agency theme is a really good one!

🙂

[alanaburton]

So far I have managed to try a few things to get the phone number and price showup on the iPhone below the logo area.

1) Divide the header logo up into the 2 sections: the right hand side with phone number and prices which ended up being 383px wide. And the left hand section consists of the logo in the full size header of 950px but just with the phone number and prices removed from the psd file then resaved. (I initially tried getting 2 slices of header image to get 950px combined width but this just placed the logo randomly in the middle and then the logo sort of underneath it. It didn't work but maybe to get that working I'd need to play around with the CSS more but I didn't get it first time just now....)

2) Add the b) section into the Media library and add into the Header right widget.

3) Change the CSS for the Header right section to be:

#header .widget-area {

float: right;

padding: 0px 0 0;

width: 383px;

}

4) Add the full width header with the logo on, just without the right hand side elements, upload into the Header area of the Dashboard.

Voila.

The phone number and prices now show up on the iPhone underneath the logo BUT the logo still only shows up about 80% width-??

I'm sure it has something to do with uploading a header image just about max 600px wide and then resizing the area allocated to it in the CSS but I'm not sure which bit to change....

Any further advice?

Thanks

[Tony @ AlphaBlossom]

I'm sure there are basic instructions, but it's hard to cover everyone's ideas, so this forum (or google) is probably your best way to find help for your specific situation.

@alanaburton looks like you made good progress 🙂

I would recommend a few changes to make the responsive layout work better. It's not the only way, but it's the way I usually do it:

I would move the background image away from the #header, and into the #title a. Then you can center it in the header when your resolution reaches a certain size.


#title a {
width: xxxpx; (or xx%)
height: xxxpx;
display: block;
text-indent: -9999px; (or set Genesis options to display logo and this is not needed)
background: your image no-repeat center center; (or top or bottom)
}


You'll also need to adjust #title-area and #title, but doing it this way will allow you to center your background image when you get to smaller resolutions.

For the right half, I would move the price circle to a background image on the widget-area wrapper (.widget-area), then you can have the phone number left aligned, the price on the right, and as it gets smaller the phone number can be centered and the pricing will stay on the right.

Let me know if that doesn't make any sense.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Pumpkin]

In this thread: http://www.studiopress.community/topic/how-to-create-a-responsive-header-image/

You will find the Nick the Geek's suggestion to use his plug-in. I am trying it out now. I'm sure this should be helpful. Also the following link has all the instructions on how to use the plug-in:

Genesis Responsive Header

[alanaburton]

Wow, amazing, thanks so much Pumpkin!

Can't believe I didn't initially search for "genesis responsive header" given that there is a genesis plugin for most things! Am quite relieved!

Studiopress *ROCKS* 🙂

Thanks again, I've uploaded the plugin and all works on the iPhone at least as expected so I'm hopeful for other devices too.

[Author]

Posts