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.

Download the source code:
https://adesignerwhocodes.ck.page/4d8e787a44

#webdesign #responsivewebdesign #webdevelopment

Thanks!
Haydn

____________________________________________________________________

Do you like the videos I make on YouTube?
Want to grow your skills as a web developer/designer?

😎 Stay informed! Sign up for my mailing list.
https://adesignerwhocodes.ck.page/f6ec5644db

👨💻 Level up your skills with courses at Skillshare:
https://www.skillshare.com/r/user/haydn5?gr_tch_ref=on&gr_trp=on
I’m a big fan of Skillshare. You can find my courses & hundreds more there. Plus if you use the link above, you get a free month on the platform. Check them out.

☕️ Received some benefit from this video? Support the channel for as little as the price of a cup of coffee.
https://adesignerwhocodes.ck.page/products/buy-haydn-a-coffee

Hi there! Haydn Adams, BFA. I’m all about helping web developers and web designers build better websites, through code, design and usability.

Got a question for me?
https://adesignerwhocodes.com/contact/

source

23 Comments

  1. 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 🙂

  2. 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

Leave A Reply

Please enter your comment!
Please enter your name here