How to Make Images Responsive in HTML & CSS // Responsive Web Design Tutorial

I wanted to focus a video on breaking down how to make an image go from static to responsive. Then taking it a step further to add padding once the image was sized for a mobile device using media queries.
Purchase & Download the source code:
adwc.dev/products/79
#webdesign #responsivewebdesign #webdevelopment
Thanks!
Haydn
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerwhocodes.com
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhocodes.com/contact/

[@Lomaxxx]

Man i cant tell how many tutorials and sites i searched to make a background image responsive. For all other ressources the image scaled, but got cut left and right. I was close to give up, but finally found this video. Helped me a loooooot. Thanks you

[@ADesignerWhoCodes]

Glad I could help!

[@AndresGarcia-ed9fh]

That was a fantastic explanation !! I understand much better now the concept of responsive images. Thanks a lot !!!

[@alanb1935]

Brilliant, I have tried for ages to understand other Video`s but to me they were far to difficult for a Pensioner to comprehend, This video was so simple to understand and it worked a treat

[@TheDuckalucky]

Your explanations are so wonderfully clear and easy to follow. Thank you for this. You've solved an hours-old headache for me. :)

[@ADesignerWhoCodes]

You are so welcome.

[@MsNarrow]

I'm totally grateful for your explanation . Sure I'll be sending this video to my partners that are starting with coding. Thanks a lot :)

[@ADesignerWhoCodes]

You're welcome! I love breaking down what seems like complicated issues into simple ones.

[@huepainting]

Just what I needed. God bless you sir.

[@ADesignerWhoCodes]

Glad it helped

[@AsheAve]

Quality, concise info. Thanks Guy!

[@ADesignerWhoCodes]

Glad it was helpful!

[@gr8bskt]

This is awesome - thank you! Can you recommend a good resource to dig into this a little more, preferably one that's friendly to visual thinkers?

[@mlsdd]

Wonderful, thank you.😍

[@ADesignerWhoCodes]

Welcome 😊

[@cipyt_]

so unbelievably clutch my guy thanks bro 🙌

[@ADesignerWhoCodes]

Glad to help

[@KasOfficial04]

Thanks bro!

[@ADesignerWhoCodes]

You bet!

[@back2lobby_YT]

thanks for the amazing explanation

[@ADesignerWhoCodes]

You’re so welcome!

[@ksiedzu3363]

thans for help you are awesome have a great life!

[@ADesignerWhoCodes]

Thank you

[@FabricioRWitt]

Really good and helpful video, thank you very much! Salutations from Brazil (:

[@ADesignerWhoCodes]

Greetings! You're so welcome. Hope it helped.

[@chaimbrownbasketball4730]

I didn't know you could set device with in a meta tag. Thanks for this video.

[@ADesignerWhoCodes]

You’re very welcome.

[@Eng.AwsNafea]

It was helpful. Thank you

[@ADesignerWhoCodes]

Glad it was helpful!

[@MrKay777]

Nice

[@tekrak585]

that nice thank you!

[@ADesignerWhoCodes]

So welcome.

[@ganeshKiD]

Thanks buddy my problem was solved

[@ADesignerWhoCodes]

Stoked!

[@mlazy4125]

thanks a lot

[@ADesignerWhoCodes]

You are so welcome!

[@rush2004]

👍👍👍👍👍👍

[@shivamdubey4783]

sir when i give padding left its reponsiveness goes away why sir

[@syediqbalahmed3176]

good ... okay ...

[@ahmadyamout6867]

dear how to make the image stretch in width ? I am not using background image I am using the normal image . I still didn't find someone doing so only they worked on background image.

[@ADesignerWhoCodes]

This video does exactly what you're looking for. The tag is for images.

[@monimaj8945]

Hi, I was struggling for an hour to set my image to be responsive and this is excacly what I needed, only one question, because now on my desktop screen size my image is huge, almost on whole screen, can I make it smaller without changing the responsivness? Thank you very much for this tutorial :)

[@ADesignerWhoCodes]

Media queries are your friend. Yes. But just have to adjust with certain sizes.

[@monimaj8945]

Thank you, I always had problem with settitng a size to image 😂 any clues? :) thanks

[@ADesignerWhoCodes]

@@monimaj8945 I have no idea what you’re doing. So hard to give any insight. My advice. Build a grid.

[@monimaj8945]

Thank you very much 😊

[@achieverscodey9855]

It's not only html and css you have used bootstrap as well

[@ADesignerWhoCodes]

Which is either HTML or CSS. :)

[@lumolunis7438]

It's good video but it doesn't work for me.