Responsive design with pure CSS

Hey there, You did such a great job. It looks so great. I love the way your code is outlined, it looks really nice. The only issue I have with your code is your "img" tag on your HTML. It's best practice for all your img tags to have the "alt" attribute even if it's empty, just make sure it's there. Then the other thing is that you gave your first img tag a width of "100%" which is wrong. The default measurement for the width and height of pictures on HTML is in PX (Pixels) and the px should not be indicated. For example, <img class=border-rad src=images/image-equilibrium.jpg alt=equilibrium width=100>, the (width ="100") there means that the width of the picture is 100px, the px should not be indicated on HTML. Asides from this I believe you are good to go. Keep up the good work.

Hi, Philale.

It's quite interesting case you have here. I was curious myself as to why <div id="img-main"> is taller than its content. Then I've played and tried several css declarations, until I realize that in order to remove the extra pixels, we have to give <img class="border-rad"...> a particular style: display: block;.

And I've googled about why this happens. The answer lies in this stackoverflow question. You can also check this other question for a bit longer explanation about this.

Hope this helps.