CODEWITHSUNDEEP
htmlcsstailwind-css
Port 8080
Port 8080

Reputation: 888

Image in Tailwind does not resize based on screen size

I tried to resize the image based on the screen size but it's not working.

<div class="max-w-4xl mx-auto">
    <img class="rounded-full -mt-10 ml-3 h-20 w-20 md:h-30 md:w-30 border-[6px] border-white bg-white"
         src="https://api.lorem.space/image/face?w=150&h=150" alt="profile picture">
</div>

What did I do wrong on this code?

Upvotes: 5

Views: 11376

Answers (1)

Port 8080
Port 8080

Reputation: 888

I was able to fixed it. Thanks to @doğukan for pointing out.

<div class="max-w-4xl mx-auto">
    <img class="rounded-full -mt-10 md:-mt-16 ml-3 md:ml-0 h-20 w-20 md:h-32 md:w-32 border-[6px] border-white bg-white"
         src="https://api.lorem.space/image?w=150&h=150" alt="profile picture">
</div>

Upvotes: 4

Related Questions