Skip to content
Submitted almost 3 years ago

FM-qr-code-component-main | Flexbox

Nick OD•270
@NickODxyz
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

Hi all.

I was left a little confused as to why 'text-align: center' on my .card class wasn't working when I tried setting my paragraph to 'max-inline-size: xxch'. When ever I did this, it would push the entire paragraph off to the left in an odd way.

To correct the issue I ended up setting 'margin: 0 auto' on my .text class. So I'm just wondering is 'max-inline-size' the correct way to set line length? Or which is the preffered method, that would not have affected the centering?

Thankyou for any feedback.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Nick, great job!

    text-align: center works great ... if you try to reduce the width of the card to 22rem you will see that the text aligns in the center.

    It seems to you that it doesn't work because the text has room to stay on only two lines and randomly ends up as if it were justified.

    So it would have been enough to add some lateral padding to the p. Here's what the max-inline-size property does exactly:

    The max-inline-size CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the max-width or the max-height property, depending on the value of writing-mode.

    Hope this help ;)

    Marked as helpful
    2
    Nick OD•270
    @NickODxyzPosted almost 3 years ago

    Thankyou @denielden that makes more sense now actually.

    I appreciate the tips.

    Nick

    1
  • Enes Öztekin•30
    @enesoeztekinPosted almost 3 years ago

    Great job! Your solution looks the same. About your question, why didn't you use "line-height" property to set the height of your text?

    1
    Nick OD•270
    @NickODxyzPosted almost 3 years ago

    @enesoeztekin I may have missed some styling, I will have to check my work again. Thank you.

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! Good Nick Job you made it look nearly perfect to the preview

    Keep up the good work!

    1

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