@elaineleung
Posted
Hi Elizabeth, this looks really great, I think you did a good job overall getting it to look as close as possible to the design in the desktop view 😊
It looks like the image links are broken right now, so I can't see the thumbnails or the other images when I click on them; what you can do is to add a dot right before the slash in your image path to indicate the current working directory.
Some other points I have that might help you:
The image thumbnail containers look quite elongated depending on the browser width, and it looks like it could be due to the fixed height you set. What I would do is to remove the fixed height of 90px on the image container, and in the .pic img I'd add this:
.pic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
It would be even better if you are using a reset rule for images already, and if you're not doing yet, I highly suggest using reset rules for all your projects!
Lastly, you can try different settings for the images and containers for better responsiveness, as right now when I make the browser smaller, the image container shrinks a bit too much. I think this has to do with your width only using percentages; I would try using something like width: min(90%, 60em) for the main container instead where the browser can choose a minimum width from the choices given. Also in mobile view, you may need a margin-inline: auto (as in margin: 0 auto) to make things centered, and also to remove the side margin/padding you have in the other containers in this view so that things would line up.
Great job again, and keep going!
