DEV Community

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

 
phacus profile image
Tiago Rinaldi • Edited

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

Thread Thread
 
francoscarpa profile image
Franco Scarpa • Edited

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

Thread Thread
 
phacus profile image
Tiago Rinaldi

Sure! Hit me up!

Thread Thread
 
francoscarpa profile image
Franco Scarpa

Where?

Thread Thread
 
phacus profile image
Tiago Rinaldi • Edited

~I'l DM ai Twitter~

Better yet, I sent you an email