Skip to content
Submitted 6 months ago

Basic QR Component Page

vi-almeida-design•30
@vi-almeida-design
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

What are you most proud of, and what would you do differently next time?
  • I took longer than I expected because of very minor stuff. I need to re-read a few articles and chapters from some books in order to sharpen my profficiency with the basics.
What challenges did you encounter, and how did you overcome them?

  • Setting up {body} the right way as to not have any issues further down the line. I got stuck for quite a while with centering the page's elements vertically in the page. I just needed to make {body taller. Using height:100vh quickly fixed that. But it took me longer than it should've.

  • I'm not profficient at all in using the align and justify properties in tandem with the display properties (block, flex, etc.)

What specific areas of your project would you like help with?

I'd love to get tips on best practices and the basics that I've missed on this run.

Community feedback

  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEhPosted 6 months ago

    Hey Great work out there ! i just notice that you are using margin : auto and giving text-align : center in order to center the text element , i suggest that instead of giving each item a text-align and margin , since you are using display you can easily align it using align-items by adding it on .copy the p element will be align on center . that's all happy coding !!

    you can now remove the text-align on each child since the .copy or the parent is have the text-align property.

    .copy {
  max-width: 288px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto; // remove this 
  align-items: center; // add this
  text-align: center; // add this
}

    h1 {
  font-size: 22px;
  font-weight: 700;
  text-align: center; // remove this 
  color: var(--dark-blue);
}

    p {
  font-size: 15px;
  font-weight: 400;
  text-align: center; // remove this
  color: var(--grayish-blue);
}
    Marked as helpful
    1
    vi-almeida-design•30
    @vi-almeida-designPosted 6 months ago

    @AkoToSiJeromeEh Thank you so much for the tip. It's a small change but it does help streamline the code.

    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