small medium large xlarge

Back to: All Forums  HTML5 and CSS3
04 May 2017, 18:56
Don (1 post)

I have two PNG pictures. I want to display the Long one on larger (computer) > 1024px screens and the Mod one on smaller (phone) screens. But even on a mobile phone screen, the code is always choosing the Long image. Why?

How to make this work correctly?

        <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="Community Care for WVA"  
04 May 2017, 19:06
Brian P. Hogan (178 posts)

Your code looks off. I recommend looking at for some suggestions.

This might be the best approach:

 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
You must be logged in to comment