Skip to content
Submitted over 2 years ago

Absolutely positioned QR component. No flexbox or grid

Grzegorz•130
@GregW1994
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

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

  • Jon Hill-Upperton•150
    @JonhilluppertonPosted over 2 years ago

    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
    @GregW1994Posted over 2 years ago

    @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

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