Flex box product card

Solution retrospective
Used only flex box, can try recreating with grid
What challenges did you encounter, and how did you overcome them?- Child elements of flex box are not pinned to parent, used
overflow: hidden
to solve it - Used negative margin to align cart icon with text in button
Please give suggestions to better organize the CSS and make it more readable
Please log in to post a comment
Log in with GitHubCommunity feedback
- @dkaffes
For the alignment of the cart icon with the text in button:
you can create two elements: an
<img>
for the cart icon and a<span>
for the text. If you enclose both elements in a<button>
, then you can apply something like:display: flex; justify-content: center; align-items: center; gap: 0.5rem;
on the
<button>
. In this way, both the cart icon and the text are perfectly aligned and centered (vertically and horizontally).For the use of a different image for the desktop and mobile version:
you should better use the
<picture>
element. You can further investigate the<picture>
element on the MDN Docs - @nilikopo
u can use :root to store some known variables
:root{ /* given variables from style-guide.md */ --color-dark-cyan: hsl(158, 36%, 37%); --color-cream: hsl(30, 38%, 92%); --color-very-dark-blue: hsl(212, 21%, 14%); --color-dark-grayish-blue: hsl(228, 12%, 48%); --color-white: hsl(0, 0%, 100%); /* my own variables */ --border-radius: 10px; --padding-description: 2em; --padding-description-vertical: 1.5em; --padding-price-inline: 1.5em; --padding-button: 1em; }
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