Responsive component using tailwind css and the picture HTML tag.
Design comparison
Solution retrospective
Any recommendations for choosing the spacing between text elements without having to resort to measuring the pixels of each margin?
This time I just used justify-content: space-between
and fiddled with the top and bottom margin of the price block, which seemed the most different of all.
Community feedback
- @md5daltonPosted about 2 years ago
Hello Nicolás Órdenes 👋
Impressive work with your solution for this challenge 👍
I've noticed the way you imported your fonts and I suppose there's nothing with since they work just fine. Here's code from Google fonts to import all of them in one
link
tag:<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
Since you're using more than one font, why not use CSS custom properties:
:root { --font-fraunces: 'Fraunces', serif; --font-montserrat: 'Montserrat', sans-serif; }
Also the
picture
element you were referring to:<picture> <source srcset="./images/image-product-desktop.jpg" media="(min-width: 576px)" /> <img src="./images/image-product-mobile.jpg" alt="transparent perfume bottle" /> </picture>
There's nothing wrong with your code, those are just my suggestions. Cheers 👌
0
Please log in to post a comment
Log in with GitHubJoin 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