A responsive website means that your design adapts to whichever device a user is browsing your website in.
By applying responsive design principles, you are ensuring your site will be able to work well on different screen sizes, so more people can access your content. Given that a good amount of your users would be very likely to browse you from their phones, it's important to keep this in consideration.
Here's some quick tips that you can apply to your project to make it responsive:
A media query consists of a media type, if that type matches the type of device the document is being displayed on, the styles are applied. How do I do this? Easy as following this syntax:
Your CSS rules go here}
Here, max width scales to fit image without stretching it and height in auto keeps the original ratio aspect.
The simplest way to do this is to define their width and height as half of the original.
<img src="linkpic500x500" alt="image">
Instead of using px or em units, switch to viewport units. Viewport units are relative to the viewport dimensions (width/height) of a device and percentages are relative to the size of the parent container elements.
Font-size: 10 vw; ->10% viewport width
3 vh; -> 3% viewport height;
Vmin: 70 vmin; -> 70% of viewport's smaller dimension
Vmax: 100 vmax; ->100% of viewport's bigger dimension
Applying these tips, your website will render in any device without problems, congratulations!