Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You can make the header responsive by giving it a background-size of 100%, can you do that instead?
Thread Starter
Tasha
(@queenv)
Hi Andrew
Thanks for the quick reply. I did the following in my child theme:
.site-header {
position: relative;
height:100%;
width:100%;
}
but it had no effect. Am I understanding you wrong?
Thank you!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
Tasha
(@queenv)
Thanks for the link Andrew, I tried it but still no change?
Here is a link if it would help. Maybe I’m just doing something stupid!
http://www.granthamfarm.angelicdesign.co.uk/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Looks like you just need to be a bit more specific with CSS:
#masthead.site-header { background-size: 100%; }
Thread Starter
Tasha
(@queenv)
Thank you Andrew. That does indeed make it responsive. I will be able to use it in future, however it doesn’t really help me in this case as it looks kind of silly with the tiny images and blue bar on a mobile. I just can’t think of a better way to do it other then loading different headers for different screen resolutions?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Loading different headers for different screen resolutions is a good way to do things, what resolutions were you planning on adding this to?
Thread Starter
Tasha
(@queenv)
I would like to use this header for any laptops and desktops, a different one for tablets and a third for mobiles. I know this is a bit general but I will design them to fit most resolutions for those screens.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try using media queries for this: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can continue using a background size of 100% but then at different widths just load another image, as you described. It could improve performance on potentially low-bandwidth devices (mobile platforms) as you are instead loading a smaller and more suitable image.
Thread Starter
Tasha
(@queenv)
Do I then remove the header image from Appearance > Header and add it as a background image with the CSS media queries?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
Tasha
(@queenv)
Ok I will give it a try. Thank you Andrew, much appreciated!!!
I am just starting my first site with twenty thirteen. I want the header image to be responsive. So when I came across this question..thought I would tag on.
I have created a child theme and intend to use it.
Where does one place this in the style sheet? Under site header??
Thank you
#masthead.site-header { background-size: 100%; }
@elames: As per the Forum Welcome, please post your own topic. Your question is completely different to the OP’s.
