Preview Card with hover
Solution retrospective
This project is a fast-win development prototype designed to explore Figma's Dev Mode and understand the transition from design to development.
It serves as a learning experience for front-end developers and designers who want to improve their workflow using Figma's Dev Mode.
This component serves as the base structure for a reusable card element in the project. It is designed to be flexible and customizable while maintaining consistency across the U
Please log in to post a comment
Log in with GitHubCommunity feedback
- @YacoubDweik
Wow!
You don't know how much difference this makes when you change the design and add your own creativity, this makes you different!
Everything is fine, except the overflow of your design in mobiles, this is because 3 things:
First point, in the section try always to add max-width instead of width, think about small screens like mobiles, setting the width to be always 385px makes the design overflows on >385px screens, max-width will solve that!
Second point, in the section flex-shrink: 0 makes the design take the max-content width, no flexibility, you do not need that!
Third point, always give max-width: 100% to any img, when you put the img in your design it keeps its dimensions, the 1000px stays 1000px, so you need a way to force it to grow and shrink according to its parent div, max-width: 100% solves that!
Keep it up!
- @psegarel
Everything seems fine except that the Solution/Design screenshots belong to different projects. Not sure why that is, so I can't really comment further.
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