How do I make my site load a different header image on smart phones?

[sevinz]

My header image is 1100x167 and looks great on desktops and tablets, but on smart phones the text in the image is too small to read.

I'm using the Daily Dish Pro theme and I'd like it to load a completely different header image (480x218) for people on smart phones.

I've been at this for hours and tried several things (mostly editing the stylesheet) but nothing seems to work. Can anyone help? Thanks!

http://www.urbansurvivalsite.com

[Victor Font]

You can do this easily because you are using a background image. This is the code you use for the normal image:

.site-title a {
    background: url(http://urbansurvivalsite.com/wp-content/uploads/uss-header-image.jpg) no-repeat !important;
}

You have to copy this to one of the media queries at the bottom of style.css or create a new media query for the size where you want the switch to take place, and just change the url to the new image.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[sevinz]

Thanks for the reply!

I actually tried this method already, and I went ahead and tried again. Here you can see where I put the code:

@media only screen and (max-width: 480px) {

	.site-title a {
    background: url(http://urbansurvivalsite.com/wp-content/uploads/uss-header-480.jpg) no-repeat !important;
}

But when I check it on my android I still see the 1100x167 image instead of the smaller one.

[Victor Font]

I just noticed that the code is adding !important to the inline CSS. This is forcing the inline CSS to override everything else. Not sure how to fix it.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Doug Edgington]

You can try using more specific rules by adding elements before .site-title to give it a higher priority. Not sure if it will override the inline declaration, but you can give it a try.

@media only screen and (max-width: 480px) {
	html body .site-title a {
    background: url(http://urbansurvivalsite.com/wp-content/uploads/uss-header-480.jpg) no-repeat !important;
}

---

Doug Edgington
http://www.dougedgington.com

[Author]

Posts