Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR code component

P
edpau 240

@edpau

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

Flexbox- gap vs Margin

Problem:

  • I tried to match the card height in the Figma file, I started with with margin-bottom: 24px on the image to create the gap between image and the text box.
  • Noticed extra vertical space added when using margin-bottom, even though the developer tools showed a 24px margin.

Solution:

  • Replaced gap: 24px in the .card flex container with margin-bottom: 24px on the image.

Please advise any better and easy way to match the Figma design card height.

What specific areas of your project would you like help with?

I tried to match the design of the card description, I want the last line of text to show "the next level" instead of "next level" , just like the Figma design, so I put a width 256px in the p tag, it forces the "the" to go to the last line.

Please advise is there any better way to achieve the same result. Thx

Community feedback

P

@alonsovzqz

Posted

I think the solution is good, but the only thing missing is just a small padding to your card__text class. So the solution to achieve that would be something like this:

.card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 16px; /* you can also use padding-inline */
}
...
.card__description {
  /* more code */
  width: 256px; /* remove this line*/
}

And that should do the trick. Hope this helps.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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