I have two PNG pictures. I want to display the Long one on larger (computer) monitors > 1024px. I want to display the Mod one on smaller (phone) screens.
The code is always choosing the Long image, even on smaller phone screens. Why?
How do I make this work correctly?
Code: "[" substituted for "<"
[source media="(max-device-width: 1024px)"
srcset="Images/CC Logo Mod.png">
[img src="Images/CC Logo Long.png"
srcset="Images/CC Logo Long.png 224w, Images/CC Logo Long.png 150w" alt="CC for WVA" />
A couple of suggestions:
- Try using max-width instead of max-device-width
- Define two source tags, one with media="(max-width: 1023px)" and one with media="(min-width: 1024px)" (each with the respective image in them).
- I wouldn't suggest using the 'vw' unit inline like this, it's not all that well supported across browsers yet, and is probably a little overkill for this purpose; instead consider just using width: 90% (this isn't directly equivalent to 90vw as it depends on the width of the container, but its a lot more standard)
- Your img tag doesn't need or use sizes, type, or srcset. Consider setting a width or height on that also
Hopefully that helps!