Design comparison
Solution retrospective
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.
Community feedback
- @danielmrz-devPosted 4 months ago
Hey there! šš½āāļø
Congrats on finishing the challenge! ā
Your project looks awesome!
Here's a tip that might interest you:
š When you have different versions of the same image, consider using the
<picture>tag.This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.
Example:
<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>Hope you find this useful!
Great job overall!
Marked as helpful0@HoaxilogPosted 4 months ago@danielmrz-dev oh that's a very useful thankyou for feedback. That is much better than setting my image to display none and use a media queries to show it.
1 - @mking0823Posted 4 months ago
Look into the picture tag I used it and it made 100% easier to switch between tags. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord