Can someone take a look at my project and tell me how can I make it responsive just like shown in the example project?
For example in the below image, as you can see upon zooming out, the image remains at its 100% size but the container doesn’t.
Also while zooming in, how can I make the image and text fit the surrounding container as shown below?
I’ve had a look at your code and I think you could benefit from resetting your CSS margins and paddings.
Browsers, by default, have a default margin and padding for the elements. If you reset them, you can style your document from scratch without surprises.
Set all margins and paddings to 0 (or use reset.css, for example) and then start applying the paddings and margins that you need. Also set the box-sizing to content-box and it will avoid some other surprises.
Thanks for looking into my code. I tried setting margins and padding to 0 but it didn’t work. However, I think I made the texts responsive by adding min and max width properties.
One thing to remember is,
%makes anything responsive andpxhas a fixed value, since you gave width: 80% to your.container, it tries to maintain that width at every screen you resize.
Try setting the
.containerwith a max-width:800px or 700px, and now resize the browser and check, what it does, it makes the container to stop growing above those fixed value(px)
Also <figure> contains a default margin, so set it to 0, or else it will affect in smaller screens, you can test that by resizing to smaller screen without clearing the margin and use dev tools ( right click and select Inspect Element or press F12 in windows )
As @SpaniardDev said, have your default margins and padding set to 0 in your body { } , you can see the difference clearly in smaller screens ( there will be extra space on the left and right of the screen )
Thank you so much. Changing the width percentage to px worked. Thanks for the help 
