Header Image Not Responsive on Mobile Devices
-
Hi everyone, I have a newly-created header image for my blog but for some reason, it does not respond to mobile devices. It looks fine on a desktop but the size does not change to fit the width of the screen on a mobile device. I believe I need to do something within the coding to fix this but have no idea where to start.
Any help at all would be greatly appreciated! Thank you. :)
The blog I need help with is: (visible only to logged in users)
-
Hey there!
I’m seeing the header image fit just fine when I shrink my desktop window or look at the site on my phone. What mobile device (and version) are you using where the image doesn’t fit properly? Are you still seeing the issue?
Let me know,
Sage -
Hi Sage, thank you for your reply. Actually, the image in question is not uploaded to my blog yet because of this problem. (I don’t want Google blacklisting it for not being mobile-friendly) Is there a way I can send you the image with the problem? Thank you again.
-
Hey there,
Yeah, if you’d like to add the image to your media library then just drop the link in here? Google won’t blacklist you for that :)
And just to specify, by the image not being responsive, is it staying the full width and forcing the whole site to be that width?
We’ll get this sorted,
Sage -
Hi Sage, thank you.
Here is the link to the image:
And yes, it just remains the full width on a mobile device. Here is a screenshot of how it looks on a cellphone:
Thanks again for your help. :)
-
Hey there,
Dropping this code in your custom CSS area should do the trick:
.header-bg { background-size: 100% !important; }Though I think you might find that the image becomes rather unreadable on mobile?
(Also, having the image not fitting the box properly like this won’t affect your Google ranking. Something that would have more affect on it would be hiding your title and subtitle and only having the image there that Google can’t read)
Hope that helps,
Sage -
Great, I’ll try this out and let you know what happens. Thank you Sage! Really appreciate the help.
-
-
Hi Sage, so that definitely helped and the image appears to be conforming to the right sizes, however how there is a now a gap between the header and the menu on the cell and iPad version so the image, while it conforms to the size, does not actually take up the entire area.
Here is an example of how it looks:
Thank you
-
Hey there!
To be honest, I’m not sure that the image will work without extensive CSS that targets it at every screen size. Also, if you look at the site on a larger screen you will see that parts of the image vanish to the point where on my screen size (2560px wide) you hardly see any of the image at all.
The best thing would be to have the image itself in there rather than as a background image as then it would scale properly. Unfortunately that can’t be done without dipping into the theme files.
Sorry to be the bearer of bad news. Another thing that might work better is if we styled the actual site title text etc so that it is similar to this image? It wouldn’t be exactly the same but it should fit better.
Hope that helps,
Sage -
Thank you Sage for your help. I just really wanted a nice banner for my blog with my face on it! haha But looks like it will be a bit more challenging than I thought. I had a third-party create the banner for me – should this have been a problem in the first place or do you think that maybe the original image was not created properly?
Also, I’m open to your last suggestion about styling the actual site title – how would we go about doing that? Thank you again.
-
Hey there!
Nope, not the fault of the original image, it’s more just the image isn’t right for that spot on the site.
I whipped up a bit of code:
body .header-bg { background-image: none; background-color: #eaeaea; } .site-branding { background-image: url(https://sagebrownell.files.wordpress.com/2016/10/sarah.jpg); background-size: contain; background-repeat: no-repeat; background-position: right; } .site-title a { color: #2d2d2d; text-transform: uppercase; font-family: "oswald", sans-serif; font-weight: lighter; border-bottom: 3px solid #a8a8a8; text-shadow: 0px 0px 4px #8e8e8e; } .site-description { font-family: "open sans", sans-serif; color: #2d2d2d; padding-top: 13px; width: 100%; max-width: 603px; margin: 0 auto; font-size: 17px; } @media screen and (max-width:1130px) { .site-branding { background-image: none; } }(You would need to replace the image link of your face with a version uploaded to your site with the link otherwise it would vanish if I took it off mine. Also would work best if the image had a transparent background) I made it so that the image vanishes at the certain screen width, otherwise it overlaps with the text.
Let me know if that doesn’t work! It’s easy to misplace something when working without being able to place the code into the file and see what changes take place, so there’s a chance something might be a bit off.
Hope that helps,
Sage -
Awesome, thank you so much, Sage. I’ll try this out tonight and let you know what happens. Thanks again for all your help. :)
-
-
Sage, thank you so much for all of your help! I truly appreciate it.
The code you created worked like a charm but the second time I pasted it in, my name was white instead of black.
What I’ve attached is what shows once I change the URL to the header on my site, as you had suggested. There is obvious overlap and when I went to uncheck site tagline, the entire text disappeared completely and the banner shrunk significantly.
Regardless, when I just directly copied and pasted what you had coded, without changing the URL, it worked beautifully, and I didn’t mind the fact that my face went away as the image got smaller, it looked good.
Thanks so much again!!!
-
Hi Sarah,
No worries!
The code I gave won’t work if you still use the full width banner across as the background. The text should change to match close-ish to the style of your original background image. Is it possible to drop my code back in there without changing it so I could have a quick look to see why the text doesn’t change?
Thanks,
Sage -
Hi Sage, no problem, here is a screenshot of the image with your code.
So what you’re saying is that, if I were to save this as is, the image would disappear entirely if you were to remove the code from your end?
I guess what confused me was when you asked me to replace the url in the code you provided with my own. What should I be using instead if not the full-width banner? Thanks as always for your help!
-
Hey there Sarah,
Sorry for the confusion! Here’s what I meant:
1. Place in the code I provided above
2. Go here https://sagebrownell.files.wordpress.com/2016/10/sarah.jpg
3. Right click the image and save it
4. Upload the image to your site and get the link
5. Place that link in the code so that it is linking the image from your site instead of mine.Let me know if that doesn’t work!
Sage -
Ah I get it now! I did just that and it worked beautifully. Thank you SO much for your help, I truly appreciate it! Is there any way for me to reach out to your directly the next time I have an issue?
Thanks again, Sage :)
-
Hey Sarah,
Glad that it worked!! No worries at all, it was my pleasure :)
If you click on my name to the left of this text it will bring you to my landing site that has information on contacting me ^_^Happy to be of assistance!
Sage
- The topic ‘Header Image Not Responsive on Mobile Devices’ is closed to new replies.
WordPress.com Forums 
