Link to codepen: https://codepen.io/zukululushikufu/full/wvKzBeg
I don’t know how to scale my images properly. Images have been the bane of my existence since I started the product landing page project.
So far these are the problems I’ve identified with my project:
- Images in my slideshow are too large on smaller screens .
- Without overflow:auto; on my card class the pricing cards overflow to my slideshow and footer on smaller screens. I want full size cards and I don’t really want scroll wheels on my price cards but I don’t know how else to prevent it from overflowing.
- Incorrect height for the image on my Dye Hair price card.
- Width of images in my pricing cards don’t touch the sides of its container on smaller screens
- (Not on current project) Initially, instead of a slideshow, I wanted to do an image gallery but the images were exceeding the width and height of its parent container. I don’t know how to fix that and I’ve been searching around all day.
If you guys encounter any more problems please tell me! Also, if you guys can point me towards some good resources to help me understand sizes that’d be greatly appreciated. One of my biggest problems is figuring out to properly define the widths and heights for just about anything. I know this post has gotten a little long so thanks a lot for reading!