So I programmatically am rendering a background image at the top section of my website using javascript. I know it works because otherwise it would not show a background image on the computer.
JS:
"use strict"; window.onload = function(){ var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; var section = document.getElementById("headingSection"); var floatHeight = document.getElementById("floater"); switch(true){ case(width <= 640): section.style.backgroundImage = "url('images/handyman-small.jpg')"; section.style.backgroundRepeat = "no-repeat"; floatHeight.style.cssText = "height: 30%;"; break; case(width <= 1280): section.style.backgroundImage = "url('images/handyman-med.jpg')"; section.style.backgroundRepeat = "no-repeat"; break; case(width > 1280): section.style.backgroundImage = "url('images/handyman-large.jpg')"; section.style.backgroundRepeat = "no-repeat"; break; } }If the JS wasn't working, it wouldn't show up on the computer screen, but it does so I know it's working. So then I thought, ok, I'll create a CSS rule to work around it not showing up on small screens.
@media only screen and (max-device-width: 576px){ #headingSection{ background-image: url(../images/handyman-small.jpg); } #floater{ height: 30%; } }I tried the path inside the url with and without quotes. And still it doesn't work.
<style>@media only screen and (max-device-width: 576px){ #headingSection{ background-image: url(images/handyman-small.jpg) !important; } #floater{ height: 30% !important; } }</style>Also tried important tags. With and without quotes on the URL. I've tried everything. It works on the emulators and the computer.
Solved! Go to Solution.
Glad to see you've limited this to your phone ...
1) Your code looks fine - It could have something to do with samsung blocking something with the script
2) Why not just put this all in the CSS vs in the javascript - this way if you are on the desktop and re-size your screen it should load the correct header
Once your issue is resolved,
please be sure to come back and click accept for the solution
Get Better Support on the Community Boards!
Etiquette When Asking for Help from the Community
Hi @alalston ,
Good suggestion by @PL281 . As you seem a pretty advanced programmer, here is a tool you might find useful particularly as you are testing on multiple browsers and platforms. I've often thought I had perfectly good code only to have a problem be very browser specific.
Hopes this helps,
James
Glad to see you've limited this to your phone ...
1) Your code looks fine - It could have something to do with samsung blocking something with the script
2) Why not just put this all in the CSS vs in the javascript - this way if you are on the desktop and re-size your screen it should load the correct header
Once your issue is resolved,
please be sure to come back and click accept for the solution
Get Better Support on the Community Boards!
Etiquette When Asking for Help from the Community
Hi @alalston ,
Good suggestion by @PL281 . As you seem a pretty advanced programmer, here is a tool you might find useful particularly as you are testing on multiple browsers and platforms. I've often thought I had perfectly good code only to have a problem be very browser specific.
Hopes this helps,
James
It turns out it's a chrome specific issue on my phone. I downloaded firefox on my phone and it renders fine. I'm not sure why its only not working on my chrome browser on my phone, as I've confirmed with several friends who have both Android and Apple devices that it renders find with chrome on their phones. Regardless, as long as it works everywhere else I'm fine with that.
Thanks @alalston for letting us know what you found out! It'll be helpful for other community members who might be having the same issue. Take care and hope to see more of you in the GoDaddy Community!
Rachel