Frontend Mentor | Responsive Website with flexbox and fixed width coding challenge solution

Solution retrospective

I found it difficult to properly align the items without flexbox. I am not sure about media query so I had calculated the width of the QR code container and put in the same value for the smallest of screen size. For the larger resolution I just let the container have the same value. Please suggest if there is a better of doing this

Please have a look at my code and let me know how can I make it follow industry standards.

Community feedback

Mohamed Magdy• 240

@M0hamedMagdy

Posted about 2 years ago

Don't worry about centering items without flexbox. It's actually recommended to always use flex and grid systems. But you could also use "margin: 0 auto" on the card element with "width: 100% and height: 100vh" on the body and it will be centered.

You can use CSS relative units like "rems" which is relative to the ROOT font-size and then change it using CSS media queries. that will help you make it more responsive on different screens.

Or you can CSS percentages to let the browser do the calculations for you.

I would recommend web.dev "Learn Responsive Design". It will help you a lot

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

@M0hamedMagdy Nice tips I agree 100%.

Mohamed Magdy• 240

@M0hamedMagdy

Posted about 2 years ago

@correlucas Thank you <3

Gaurab Bhowmick• 90

@Gaurab019

Posted about 2 years ago

@M0hamedMagdy i tried using margin auto but then used a single div with display flex and height as100vh which was easy to use for centering

I have no experience using media query so i did some calculation and put in a fixed width

Responsive Website with flexbox and fixed width

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community