Discussion on: What the Hell! Can anyone help me with scrset and sizes in HTML?

[Franco Scarpa]

Ok, but the width of the slot when the viewport is 1200px is written to be 799px, and 850w is closer to 799px than 900w, so I think that rufy1.jpg should be shown. I wasn't able to understand, Tiago. Sorry, but can you help me with one more snippet?

  <img srcset="rufy.jpg 850w, zoro.jpg 910w, jinbe.png 1100w"
       sizes="(min-width: 1100px) 1100px, (min-width: 910px) 910px, (min-width: 850px) 850px"
       src="rufy.jpg"
       alt="One Piece">

Why is jinbe.png always shown when I resize the browser window?

[Tiago Rinaldi]

What is the expected output in this example? It seems like you're struggling with CSS and precedence.

It sounds trivial but that is what CSS (Cascading Style Sheets) is, I can't stress enough to read about it.
With these rules you're saying:

When the browser is 1100px or wider, use jimble.png
When the browser is 910px or wider, use zoro.png
When the browser is 850px or wider, use rufy.png

Confusing, isn't? I'd recommend read an article on responsive design, as you can see it can become a pain.

In any case, I copied and paste your code into a pen just changing to dummy images and it seems to be working? Can you try it?

Let's review the queries:

When the browser is 1100px or wider, use jimble.png

Here's the browser at 1200px

When the browser is 910px or wider, use zoro.png

Here's at 1000px

When the browser is 850px or wider, use rufy.png

Finally at 900px

[Franco Scarpa]

It doesn't work here. Tiago, could I write directly to you privately in any way, maybe a chat?

[Tiago Rinaldi]

Sure! Hit me up!

[Franco Scarpa]

Where?

[Tiago Rinaldi]

~I'l DM ai Twitter~

Better yet, I sent you an email