Smartphone header image

  • Resolved ianmarshall

    (@ianmarshall)


    11 years, 3 months 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.

Viewing 12 replies - 1 through 12 (of 12 total)

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

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

    Change https://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?

    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(https://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!

    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.

    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(https://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: https://undertheboom.com

    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(https://undertheboom.com/wp-content/uploads/2013/09/underboomphone2.jpg) !important;

    Kathryn, that did it! Thank you so much for your help. You’re a genius. ??

    Glad that worked – thanks for letting me know!

    Thread Starter ianmarshall

    (@ianmarshall)

    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!

    Glad it worked for you too, ianmarshall!

    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 450×74 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

    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.

    Thread Starter ianmarshall

    (@ianmarshall)

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Smartphone header image’ is closed to new replies.