Again, I had a little difficulty positioning the elements, but it served as a lesson for further research and I understood better how display blocks, inline and inline blocks work. Other than float and friends.
@rachit0706
Posted
Also, you can use <picture> element for different screen sizes instead of media queries. Like below-
<picture>
<source media="(min-width: 600px)" srcset="desktop.jpg">
<img src="mobile.jpg">
</picture>
@brendowe
Posted
@rachit0706 As I was about to change other things, I thought of using it in the media query, but this form seems to me to be faster and simpler to implement. Thank you very much for the tips my friend.
@debjit
Posted
Hey, Grande Soldador, You made a really nice card. Good work. However, I should mention some areas for development. Your card needs to have a margin added to it for mobile so that space can be left around it. For further explanation, watch Kevin Powell's YouTube video, "Responsive Product Card Component - Frontend Mentor Challenge," in which he explains this in great detail. He literally just posted an hour ago. Best of luck for your next challenge.
@brendowe
Posted
@debjit His channel is really good, thanks a lot for the recommendation. Also thanks for the tip in the margin, I plan to tidy up my code using Kevin's channel as a guide. Thanks a lot for the tips my friend.
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
