Responsive test #1

Hello. I am solving the first project of responsive design course. This is my solution:

Everytime I do the test it fails about the responsiveness of the image, but when I change the size of the window the image also change. I wrote this in the css file:

img {
max-width: 100%;

I want to ask if I must be worried from anything else when I am trying to make an image responsive.


1 Like

Hello there,
I have taken a look at your code. Adding max-width:100% allows the image to increase and decrease according to the size of the viewport with the maximum width being its original width size. There are a host of other ways but this fits perfectly in the given project.However the reason you are failing is because the test requires you to pass another css style, but doesnt mention it, by passing display:block to your image which apparently gets rid of the white spaces.
Kindly note that images have the (display: inline;) property by default except for some few circumstances.

Also the center tags are incorrectly placed, where the closing tag is within the figcaption tag, set it correctly and you have 9 marks out of 10.

1 Like

Solved! Thanks you very much!