WordPress.org

Forums

Bouquet
[resolved] Smartphone header image (13 posts)

  1. ianmarshall
    Member
    Posted 1 year ago #

    A header image I was provided with at work has a logo with text in. When the media query resizes the screen for smartphones it all looks a little squashed. This is due to the image being text so thought it would be best to have a different header image load for smartphones. I thought the way around this was to edit the media query -

    @media (max-width: 450px) {
    	#branding{ background: url(images/smartphoneheader.png);},
    	#branding .header-link {
    		min-height: 90px;
    	}

    This doesn't work though, it just loads the default header. Any helpers out there? I assume it is just my css syntax? I have tried it in a child theme as well as the parent.

  2. Try using a full path to your image, for example:

    url(http://www.yourdomain.com/images/smartphoneheader.png)

    Change http://www.yourdomain.com to your domain, of course. :-)

    You could also change

    background

    to

    background-image

    If that doesn't work, could you provide a link to your site so I can take a look?

  3. Kay Harrison
    Member
    Posted 1 year ago #

    I am having the same problem. I want to use a different image for 450px. So, in CSS. I have this:

    @media (max-width: 450px) {
    #branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg);
    }
    #branding .header-link {
    min-height: 90px;
    }
    etc. }

    My image is 450 x 90px.

    But it does not work. The default header image gets cut off, and the smaller image does not load. I'm a novice, learning quickly, so it could be a missing bracket issue :-), but I can't see it. Here's the site: undertheboom.com

    Thanks for any help!

    Kay
    PS I broke my site trying to fix this, so I have to go fix it before you can see the issue!

  4. Hi there - I highly recommend you don't make edits to your live theme. :-) It's a much better idea to set up a local test server or a development site for testing.

    Let me know when you've reverted it back and I'll have a look.

  5. Kay Harrison
    Member
    Posted 1 year ago #

    I fixed the site,and I am now editing a child theme. I have this in the style.css to make a smaller header image load on smart phones:

    @media (max-width: 450px) {
    	#branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg);
    	#branding .header-link {
    		min-height: 90px;
    	}
    }

    This does not load the image, and the large header image does not scale. It just cuts off.

    Site is: http://undertheboom.com

  6. Hi there, it looks like your custom background image - the one you uploaded through the dashboard - may be overriding your mobile background image.

    Could you try adding an !important declaration to the end of this line to force it, and let me know how it goes:

    #branding{ background-image: url(http://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg) !important;

  7. Kay Harrison
    Member
    Posted 1 year ago #

    Kathryn, that did it! Thank you so much for your help. You're a genius. :-)

  8. Glad that worked - thanks for letting me know!

  9. ianmarshall
    Member
    Posted 1 year ago #

    No idea why I didn't think of adding the important tag! Mine required the below:

    @media (max-width: 450px) {
    	#branding{ background: url(images/smartphoneheader.png) !important;min-height: 90px;}

    Now works! Thanks!

  10. Glad it worked for you too, ianmarshall!

  11. Nemiltak69
    Member
    Posted 1 year ago #

    Hello,

    I am having the same issue with the site I am using.

    I tried the above meantioned fix and it resizes the image using the image I uploaded with 450x74 dimensions. My problem is that is scales it down better than it did before, but it still barely cuts off the header image. Also, it repeats the image and I would like it to only display it once. Any suggestions?

    Here is the site: nourishingskinproducts.com

  12. Nemiltak69
    Member
    Posted 1 year ago #

    Also,
    when I change my smartphone horizontally it messes up the scaling again. Do I need to add a custom image for each of the @media (max-width: sections? Thanks for your help.

  13. ianmarshall
    Member
    Posted 1 year ago #

    Yes my workaround included a custom image for each @media section.

    The reason why your image is repeating is because your image is only 74px high and the header is set to a specific height so you have two options. Set a no repeat in the css or edit the height of the header.

    I can't recall which file I edited to do this (I don't use the theme anymore) but you will have to edit the min-height to the size of your image.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic