Skip to content
Submitted over 2 years ago

Responsive layout using flex box.

Petru Banceanu•110
@Petru14
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

The most difficult thing about the challenge was setting "text-align: center; " because I forgot about this property and I took me a while till I figured out.

I'm not 100% sure if my seizes for margin and padding are correctly.

The only questions I have are about how clean my code is and where I can improve.

Thanks!

Community feedback

  • Akanni Feyisara•110
    @Feyisara2306Posted over 2 years ago

    Well done Petru!

    I noticed the code isn't responsive at all. You can try using relative units(like vh, vw and percentages) as Joaquin pointed out.

    Also the page isn't centralized, I suggest adding a 100% height to the html and body.

    html, body{ height: 100%; }

    html{ display: table; margin: auto; }

    body{ display: table-cell; vertical-align: middle; }

    Marked as helpful
    2
  • Joaquin•40
    @SzolnoPosted over 2 years ago

    Hey! Just saw your solution and I realized your solution is not responsive at all.

    I think the issue is that .content class has some margins set with absolute units, maybe you should try using %, or check out my aproach on this same challenge.

    I hope you try my suggestions, I'm just starting out with html and css but I think I've got the basics of responsive development covered.

    Cheers !

    Marked as helpful
    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