Coming up with an idea on how to solve my problem while doing this challenge.
What challenges did you encounter, and how did you overcome them?My problem that encounter is about the image, I started at 375px (mobile device) i set my card (parent element) to padding 1.5rem and i have a child; first is the image, I set position: absolute to stick at the very top and for another child which is the text below the image I set the margin-top to have some space and so I can see the text. Now there's a problem when I do this;
- The space above the text is so huge when trying to zoom in at 375px.
- Trying to remove the padding for my div > img but staying the padding for the text below
SOLUTION
- instead of relying on same div parent with same padding I make a different parent with the same padding for them. But removing the padding for my image using media queries since it only need to stick at the very top when u are on max-width 375px devices.
REALIZATION
- while doing this challenge I thought my path is gonna be easy like there is no problem that I can solve but this problem that i encounter humble me.