small medium large xlarge

Back to: All Forums  HTML5 and CSS3
Generic-user-small
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?

<picture>
        <source media="(max-device-width: 1024px)"
                sizes="90vw"
                type="image/png"
                srcset="Images/CC Logo Mod.png">
        <img src="Images/CC Logo Long.png" 
             sizes="90vw"
             type="image/png"
             srcset="Images/CC Logo Long.png 224w, Images/CC Logo Long.png 150w"
             alt="Community Care for WVA"  
             />
    </picture>
Bphogan2016_pragsmall
04 May 2017, 19:06
Brian P. Hogan (174 posts)

Your code looks off. I recommend looking at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture for some suggestions.

This might be the best approach:

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