Skip to content
OverviewSolutions
7
Comments
6
Gabriel Gusso
@g-pg

All comments

  • Jorge Martinez•30
    @TrueKarterSubmitted over 1 year ago
    • 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?

    QR code component using flexbox

    1
    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
  • Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    To center an element you could try using

    display: flex;
justify-content: center;
align-items: center;

    on the parent element (the <body>, in your case).

    Don't forget to set a height on the parent as well, so it knows what is the center. Normally I already set a "min-height" of 100vh on the body everytime I start a new project.

    Marked as helpful
    2
  • alesbe•10
    @alesbeSubmitted over 1 year ago

    Approach

    Since this was a very easy challenge, I decided to use Vanilla HTML and CSS!

    Design decisions

    I had some doubts deciding which unit should I use. Since the card size don't change from one screen size to another, I decided to use px instead of a relative unit.

    Also, I guess that the css selectors could be optimized a bit, some feedback would be apreciated!

    QR code component

    2
    Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    Hey @alesbe!

    Nice solution!

    I noticed some improvents you could make. Some of them would fix these warnings you received on your accessibility report.

    1. Try to always wrap the main content of your page in <main> tags.
    2. Avoid using <h2> if there's no previous <h1> on the same page. The best practice to ensure accessibility is following an order of heading tags.
    3. Don't forget the "alt" attribute in your <img> tag. This is what screen readers read. Also, it's the alternative text for images that doesn't load for some reason.
    4. You put text directly inside a <div> tag. It would be more appropriate to wrap your text inside a <p> tag in this case. Again, this is for accessibility purposes.
    Marked as helpful
    1
  • Rebecca Copeland•50
    @rebcopSubmitted over 1 year ago

    Hi! 👋

    With semantic HTML, would div be ok in this situation to wrap the QR component or is there a more appropriate tag that should have been used?

    HTML

    <main>
    <div class="card">
      <img src="images/image-qr-code.png" alt="QR Code for Frontend Mentor" />
      <h1>Improve your front-end skills by building projects</h1>

      <p>
        Scan the QR code to visit Frontend Mentor and take your coding skills
        to the next level
      </p>
    </div>
  </main>

    QR Code Component Using CSS Flexbox

    2
    Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    Hey, Rebecca.

    The <section> tag would be appropriate in this case. It points to a semantically distinct element on your page, as is the case of a "card".

    Marked as helpful
    1
  • Layomi1•20
    @Layomi1Submitted over 1 year ago
    • the text alignment

    flex

    3
    Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    Hey Layomi.

    To correct the text alignment you could try to increase the font-size. Also, it's a good practice to use "em" or "rem" units on font sizes instead of pixels. They are proportional to the user's browser settings, making them more responsible.

    Another tip is to avoid using an <h3> tag if you didn't use an <h2> and so on. Ensure your heading tags follow an order.

    Finally, you could wrap all your content inside the <body> tag in a <main> tag, since the card is your main content in this page.

    Marked as helpful
    0
  • Sumit Mukharjee•20
    @sumitmukharjeeeeeeSubmitted over 1 year ago

    Hyy everyone I tried to build this qr component but I am having probelm with text of header and paragraph, I am not able to make it in two lines

    QR CODE COMPONENT

    4
    Gabriel Gusso•250
    @g-pgPosted over 1 year ago

    Try to reduce the font size of both the title and the description!

    2