The Image is Responsive but it's HUGE!

Hi!

I’m building my second project, InspaQuote, and I made the image/poster responsive so it would look good on phones and tablets, etc.

So I tried to make it smaller, but then it wouldn’t resize. I already searched this up, nothing helps, and I can’t fix it. If you need more explanation, please let me know!

By the way, I’m using HTML, JavaScript, and CSS for the website.

Thank you,

  • Zoe K.

can you use :

<picture> <source srcset="small.jpg"> <source media="(min-width: 480px)" srcset="medium.jpg"> <source media="(min-width: 1024px)" srcset="large.jpg"> <img src="fallback.jpg"> </picture>

if you want to use different images, for the different breackpoints.

1 Like

try that:

width: 540px; \<!-- you can use % --\>  
height:auto;  

540px is an example 

1 Like

@avolpe98that’s already done :slight_smile:

I just needed to make it smaller which, I can’t.

This is the InspaQuote home file.

@carmelomylo  it doesn’t work, it deletes the image instead.