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

Submitted

Responsive desktop to mobile page using css flex and layout

@Oluwatobi-M

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


What could i have done better? i'm open to learning from you

Community feedback

nerometa 250

@nerometa

Posted

I guess you're new to coding. This is good enough based on your experiences. Now, several things I want you to fix and I know you can do it:

  • Your card and image border radius. % unit is too much. Use px unit on it will look far more similar to the design.
  • You can group your 2 paragraphs together, then apply padding to it. This is more consistent and I think it's pretty responsive. If you worried about paragraph spacing, you can still add top or bottom padding to each paragraph.
  • Card height and width can use other responsive units such as % or vw for width and vh for height. Fixed units like px is hard to do responsive design.
0

@Oluwatobi-M

Posted

@nerometa Hi, you're right. I'm just starting out. I'll take your advice on the first and second points but I'll kindly object on the third point.

I initially tried using % and vw/vh for the card height and width but found the paragraphs spilling out of the card layout as i reduced the width of the page. Using px gave me a consistency i was looking for without the paragraphs spilling out until i hit the breakpoint for mobile design where i provided different values per width and height. I'll look at it and give it more thought on how to improve it.

Thank you very much for the feedback, i appreciate it.

0

@mohamed3omar

Posted

Great job ..at the next time try to work with the screen size which the challenge give you , i think it will be very closer to the challenge in size .

0

@Oluwatobi-M

Posted

@mohamed3omar Hi, thank you very much for the feedback. I only noticed the size discrepancy after I had submitted my solution. I would make an update on the code accordingly. Thank you very much again.

0

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