Skip to content
Submitted about 2 months ago

Centered Card Using Plain CSS (Flexbox)

Vladislav Zenin•120
@vladzen13
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?

Well, fixed width of img and .card-text seems not very responsive. However, you can notice it only on viewports less than 320px, so technically it's fine.

Flexbox is cool:)

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

h1 font looks a bit different in figma than on html although all properties of typography seems the same. Why is that or I am just crazy and they are the same?

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

Flexbox children behave like inline-block - no newline and minimum width possible? Are there any differences/details ?

Community feedback

  • Artedix9•20
    @Artedix9Posted about 2 months ago

    h1 font do look different from the figma file. But everything else looks on point to the given design, and nicely structed codes

    1
  • Huy Phan•2,060
    @huyphan2210Posted about 2 months ago

    Hi, @vladzen13

    I saw your solution and your solution retrospective. I have some thoughts:

    • You mentioned your h1 looks different from the design. It might be because the link to the font family is incorrect. Try updating it from https://fonts.googleapis.com/css2?family=Outfit:wght@400,700&display=swap to https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap.
    • Regarding the Flexbox question, Flexbox offers more flexibility by allowing items to grow, shrink, and wrap dynamically using properties like flex-grow and flex-wrap. Inline-block elements don’t have the same responsiveness, as their size is mostly based on content or a set width. Additionally, if you want Flexbox items on new lines, you can set flex-direction: column on the Flexbox itself.

    Hope this helps!

    1
    Vladislav Zenin•120
    @vladzen13Posted about 2 months ago

    @huyphan2210

    • You are so right on Google Fonts issue, thx a lot!
    • About Flexbox - yeah, I wrote it in a strange way. I meant - by default single flex children is just like inline-block element.
    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