Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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 layout using flex box.

@Petru14

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


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

@Feyisara2306

Posted

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

@Szolno

Posted

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
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