Product Card Compo using Tailwind for the first time and CSS
Design comparison
Solution retrospective
Hello friends,
Just finished my challenge using tailwind for the first time. I would love to have some feedback on how to optimise my code. I'm pretty sure I can only use tailwind, but it was tough for me so I had to use some classic CSS.
Also I was unable to do the responsiveness into the mobile version...If anyone has some leads...Preferably using tailwind.
Thanks a lot!
Community feedback
- @codedforfreePosted about 2 years ago
Good start at using tailwind. With tailwind it’s just a bit getting used to. You would be surprised how easy and logic all classes are. What can help is using a tailwind afdoen for visual studio code. But only if you’re using that as you’re code editor.
I did this challenge with tailwind only so you can always take a peak 😉.
Keep it up and looking forward to your next project.
Marked as helpful0@KenbakPosted about 2 years ago@codedforfree I am using visual studio code! What is afdoen?
I'm definitely going to check out your code, curious of how it looks with tailwind!
0 - @correlucasPosted about 2 years ago
👾Hello Kenbak, congratulations for your new solution!
Another great solution! Its amazing, you need only some adjustments:
The container is a little bit bigger than the value you've used is around
max-width: 900px
remember to usemax-width
for responsive elements, you've usedwidth
and this makes the container with a fixed size..container { max-width: 900px; }
To make your image fully responsive add
display: block
andmax-width: 100%
andobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
A better and easier way to manage the product image is by inserting the tag
<picture>
to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with thepicture tag
you can look at the documentation to see how to set it:https://www.w3schools.com/tags/tag_picture.asp
👋 I hope this helps you and happy coding!
Marked as helpful0@KenbakPosted about 2 years ago@correlucas Yes, I completely forgot! I'll check out the picture tag asap! Thanks again ser !
1
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