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: https://codepen.io/asmakhan1651/pen/XWrQOYj?editors=1100. 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!
-Asma
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