I created the Tribute Page project for Responsive Web Design.
Everything things works fine, all the user stories are met but the test for img responsive fails. When I add just another line “display: block;” for the img, nothing changes but this passes the test. What is happening?
It can be hard to see the change. But setting img elements to display: block will remove some white space you might get otherwise.
The reason why you do not see the images change size is that the page is overflowing. If you set the .wrapper styles to max-width instead of width you will see the images change their size.
what is the reason for that extra white space when I have set margin, padding to zero and box-sizing to border box. Also, how did display block’s extra space affecting my photo resizing?
The img element is a replacement element but it behaves as an inline-block element. All inline-block elements have such a whitespace. It was more an issue back when people created grid layouts using inline-block elements.
It didn’t. The test is just grouped with the responsive tests. Setting it to display block doesn’t make it responsive.
The fixed-width you have on the container does however break the responsiveness of the images.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.