Skip to content
Submitted 6 months ago

Used Flexbox to build responsive card

Ashap Bappy•50
@ashap-bappy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used flexbox after learning it.

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

First of all I couldn't fit the image into the container, then I googled and learned about setting width: 100%. Then I struggled about setting the padding of the image. I tried setting the padding in the image, but I should have setting the padding in the container. After a while searching I found out the solution and solved it.

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

How do you determine the size of the element like, border-radius, padding, margin etc.

Community feedback

  • Grace•31,270
    @grace-snowPosted 6 months ago

    A few important foundational learnings:

    • linking fonts in the html head is slightly better for performance than using imports in CSS.
    • Don't ever limit the height of elements that contain text, including the body. Use min-height instead so the body can grow taller than the viewport height when needed (eg on mobile landscape).
    • Never set font size in px.
    • if using flex on the body it should be a column not row.
    • don't set a width on the component. It's making it hit my screen edges. Instead, set a max width only. And use rem instead of px so the layout works for all people and scales correctly even if those people use a larger text size.
    • make sure the component can never touch screen edges by either giving it a little margin or giving a wrapping element (eg body) a little padding.
    Marked as helpful
    1
    Ashap Bappy•50
    @ashap-bappyPosted 6 months ago

    @grace-snow Thanks for your valuable feedback. Will try to improve my solution.

    0
    Ashap Bappy•50
    @ashap-bappyPosted 6 months ago

    @grace-snow I've updated my code according to your suggestion. Can you please review it?

    0
    Grace•31,270
    @grace-snowPosted 6 months ago

    @ashap-bappy that looks good now. The only change left to fix is the alt description on that image. Remember alt text is content not code. It's not a class name. It's an actual description of the image. In this case it needs to say what the image is (QR code) and where it goes to (to FrontendMentor.io).

    Marked as helpful
    1
  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋

    Free+ challenges provide free Figma files, which makes it easier to determine spacing. You can subscribe to Premium, so you get the Figma files for all challenges. Or if you don't want to subscribe, you can use the PerfectPixel browser-extension, which allows you to import the design files provided to all challenges and you can make them semi-transparent.

    Hope this was helpful 🙏

    Good luck and happy coding! 🤘

    Marked as helpful
    1
    Ashap Bappy•50
    @ashap-bappyPosted 6 months ago

    @kodan96 Thank for your recommendation. Will use that extension next time.

    0

Please log in to post a comment

Log in with GitHub

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