Tribute Landing Page Issue

Hello Everyone!

I am unable to solve a problem relating to image heights in CSS. Here is the link to the tribute project I am currently working on: There are four images under the heading "Awards and Works. Three of the images have one height but the fourth image has a slightly larger height. I have commented the portion of the HTML code for the fourth image which is causing the problem and would appreciate any help on this. Thanks!


Hi Asma.
First of all, let me tell that I´m far from being an expert. In fact, I´ve just got my Responsive Web Design certificate a couple of weeks ago.

Having telling that, I would suggest that, considering that all the 4 covers have a different height (and the forth is has the most noticeable one) that you don´t work with % in the books class. Instead of that, you can set the height in pixels.

Try this
.books img { height: 400px; padding: 5%; }

instead of what you used.

The better solution is using a photo editing software to set all the images with the same width and height.
Hope it helps