Archived topic
Responsive Image in Header Widget
12 replies · Started by Kelly on August 26, 2016
I put an image that is a link to another part of my site. I am having a dickens of a time trying to get that image to be responsive like the header image. I'm tried so many different things and can't get it to size down as the screen shrinks even while the header image does. It actually seem to jump a bit outside the bounds of the widget container.
.inside-header {
white-space: nowrap;
max-width: 99%;
}
.site-logo {
width:62%;
display: inline-block;
text-align: center;
vertical-align: middle;
margin: 0 3%;
white-space: normal;
}
.header-widget {
width:35%;
display: block;
text-align: center;
vertical-align: middle;
margin: 0 3%;
white-space: normal;
}As a sign not, I did ad some CSS to keep the header image and the widget from being fluid so they wouldn't break until it switches to the mobile menu navigation.
I also added your css that is supposed to float the header widget below the header image which it will do, but not until it floats it on top first...it finally goes under once the screen gets supper small. I would vote for it to be standard feature for it to float below as it is the most logical.
Getting my header widget image to be responsive is my priority though. Any ideas would be greatly appreciated. This is the site I am working on...
Hi there,
The image looks responsive to me, it just doesn't have a container forcing it to become smaller like the logo does. You can see it start to size down a little bit as you reduce your browser size.
As for the order of the items, have you tried this CSS?: https://gist.github.com/generatepress/d39375f70a6ed1075bf0
It is responsive once you size down the screen quite a bit, but it doesn't stay in portion height-wise to the header image...both images are 200px high. It always remains much larger and creates a large amount of white space under the header image. I would like them to maintain the same height as the screen shrinks. I've tried to suss out of the css without success why the header image will shrink down proportional to the screen size but the header won't.
Unfortunately that's not really possible as they're located differently and the container pushes on them differently.
If you need them to resize at the same time, you'll need to merge them into one image.
Let me know if you need more info :)
Well, that's unfortunate. I can't make it all one image as I need the image in the right to be a link. It's looking like I might need to switch to another theme. Thanks.
If you can find another site or theme that can do this, I would love to see it and I should be able to help you achieve it with GP.
The issue here isn't the theme, it's the way images respond to browser sizing.
Not sure exactly but I had a look at this and something that works I think as you mean could be this.
@media (max-width: 1047px) {
.header-widget img {max-width:50%;}
.header-widget {margin:0 auto;}
}
That definitely allows the image to size down at that breakpoint. The margin for the widget just sets the image in the centre. You could play with the % max-width to get it to look right for you and add more breakpoints etc to tweak.
I think that is what you are aiming for? Probably needs more targetting
This works a bit better
@media (max-width: 1047px) {
.header-widget img {max-width:30%;}
.header-widget {max-width:100%;width:100%;text-align:center!important;}
}
I am sure it could be done better but this works. If that gets too small at small screens you could just add media queries to adjust at that breakpoint and tighten any padding or margins also.
Great idea, Neil! Thank you :)
Thanks Neil for the input. Your CSS is much cleaner than mine to keep the header from breaking too soon, but I am still having the issue of the right header image not being responsive relative to the header image itself. As the screen shrinks, the header image gets smaller as you go along, but the image on the right stays pretty much the same until it gets quite small. It creates a lot of white space under the header image and give way too much emphasis to the header widget image.
The bottom line is, the header image and the header widget image start out as 200px high, and I'd like them both to maintain the same height proportion as the screen narrows.
OK, scratch that...the first part of about Neil's css keeping it from breaking too soon. I mistakenly put it in the wrong place. It works well for shrinking and centering the widget image for mobile under (1047px) but it's not for larger than 1047px. I tweaked the CSS, did a media query for over 1047, aligned right and changed the percentage down and it's working closer to what I need. Thank you!
@media (min-width: 1048px) {
.header-widget img {
max-width:20%;
}
.header-widget {
max-width:100%;
width:100%;
text-align:right!important;}
}
@media (max-width: 1047px) {
.header-widget img {
max-width:30%;
}
.header-widget {
max-width:100%;
width:100%;
text-align:center!important;}
}Hey great Kelly! I thought it would need more tweaking but at least you are the right track hopefully!
Neil, though I was pretty happy with the results I was able to achieve with your help, my client is being a stickler about the spacing of the header elements across the top of the screen. I've been driving myself a bit crazy with trying to get it to match close to the header layout he wants, but no success.
I was wondering if you I might be able to interest you in taking a deeper look at this for me. I'd be happy to compensate for the time. I'm feeling like I'm spinning my wheels and not being productive.
If so, can you contact me through my website?
My apologies if this is not the appropriate place for this type of request.
Thanks!
