Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Responsive Image in Header Widget

Home Forums Support [Resolved] Responsive Image in Header Widget

Home Forums Support Responsive Image in Header Widget

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #221594
    Kelly

    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…

    http://budgetsignsmadison.com/test/

    #221604
    Tom
    Lead Developer
    Lead Developer

    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

    #221641
    Kelly

    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.

    #221703
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #221807
    Kelly

    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.

    #221813
    Tom
    Lead Developer
    Lead Developer

    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.

    #221850
    Neil

    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

    #221852
    Neil

    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.

    #221870
    Tom
    Lead Developer
    Lead Developer

    Great idea, Neil! Thank you πŸ™‚

    #222144
    Kelly

    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.

    #222169
    Kelly

    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;}
    }
    #222178
    Neil

    Hey great Kelly! I thought it would need more tweaking but at least you are the right track hopefully!

    #224061
    Kelly

    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!

    Kelly
    http://www.stickpeopleproductions.com

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.