Product Preview Card using CUBE CSS
Solution retrospective
I'm pretty happy with this. I normally build apps, so this was a good opportunity to experiment more with fluid typography and intrinsic design.
I'm not 100% happy about having to specify the grid column widths for the large viewport. I would've liked it that the image took up enough space as it needed to maintain its aspect ration, while the content section expanded in width as much as it needed. But I couldn't get that to work. The repeat(2, 1fr) grid seemed like an acceptable compromise.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Christ-Kevin
Hi Alex,
congratulation. you have a nice looking website. I would like to give you some ideas how you can avoid the html validation issues. I think your website can look better if you define the width and height of your images in the css and not in the html file. While defining the width and the height in your css you can use min and max values if the image size increase too fast with the viewport compare to the container size.
Another issue is the alignment of your second price. it should have the same alignment as the first one. My suggestion would be to use the " " to create space between the first price and the second one, then you should use another span for the second price. And to make sure that the second price is vertically in the middle of the container you can make " display: inline-flex;
align-items: center;" for your spans.I hope this could help you
Happy coding
Christ
Marked as helpful
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