Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Absolutely positioned QR component. No flexbox or grid

Grzegorz 130

@GregW1994

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


Hey guys, this is my first frontend mentor project. I'm pretty satisfied with the results, although I have a few questions about my approach and typography.

  1. <h1> element text looked too sharp, so I set 'opacity' property to 90% to make it look more blurry. What do you think about this approach? What other technique would you recommend?
  2. Due to using absolute position on 2 elements in the same container, those elements started overlapping with each other after viewport height decreased to about 660px. I fixed it with media query, but now it doesn't have that smooth transition while resizing the window (footer suddenly jumps below the viewport when reaching @media (max-height)). Was it a bad idea to use position absolute? If so, what approach would you recommend?

  3. Did i make any stupid mistakes, or unnecessary code-repetition?

I'll be grateful for any feedback

Community feedback

@Jonhillupperton

Posted

Hello Grzegorz,

Well done on submitting your solution to this challenge.

Few bits of advice to help you.

I wouldn't use position absolute on this, I have done the same challenge and I use Flexbox, not sure if you are experience with it. In the CSS by adding the following to the various elements you will center on the page in desktop and mobile mode. You won't need a media querie.

body { Min-Height: 100vh; Display: Flex; Flex-Direction: Column; Justify-Content: Center; Align-Items: Center;

.container { Max-Width: 320px; }

IMG { Width: 100%; Display: block; }

Also try and use rem for most of the elements (font-size, margin and padding) with the main html tag, you have place that within a div tag ideally you want that to be the first tag used after the body tag and assign the main tag class of container. The frontend mentor message at the end place that in a div.

it is a journey we are all on and keep learning and do the projects you will find your own way of doing these.

Thanks

Jon

Marked as helpful

0

Grzegorz 130

@GregW1994

Posted

@Jonhillupperton Thanks for kind words and your remarks. Flexboox indeed is a better way to set up the layout for this project.

I appreciate the feedback

Best regards, Grzegorz

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