Submitted over 1 year ago

QR code component using flexbox

Jorge Martinez•30

@TrueKarter

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Is the use of rem units used, rather than px, contributing towards a responsive design?
In the following code below, code to align the QR code caption within the card, is there a more efficient method? Code snippet:

#caption {
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  max-width: 80%;

  h1 {
    margin: 0;
    font-size: 1.375rem;
    color: $dark-blue;
  }

  p {
    margin: 0;
    margin-top: -0.75rem;
    color: $grayish-blue;
  }
}

Would the use of media queries assist in a responsive design within this project?

Community feedback

Gabriel Gusso•250
@g-pgPosted over 1 year ago
Regarding the "rem" unit, yes, it is a relative unit based on the font size set on the root element of your page. This means that changing the font size of this element will automatically affect everything that uses "rem" as a unit. Additionally, the font size that "rem" is based on can be adjusted by the user in their browser settings. By using "rem," your website can adapt to the user's preferred appearance.

As for the text alignment, if a line of code gets the job done, it's fine. From my experience, I rarely use "space-evenly" when justifying content with flexbox. I prefer using "space-between" as it provides better control over the alignment of an element with others. Unlike "space-evenly," "space-between" doesn't create additional space at the edges of the box and ensures that the flex items touch the box.

Regarding the use of media queries, I don't believe it's necessary in this case. The size of the card is already small, and it can easily be made responsive without relying on media queries.
Marked as helpful
1

Please log in to post a comment

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