Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
6

Gabriel Gusso

@g-pgCuritiba, Paraná250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Interactive rating component with Vue

    #vue

    Gabriel Gusso•250
    Submitted about 2 years ago

    0 comments
  • Responsive page using VueJS

    #vue

    Gabriel Gusso•250
    Submitted about 2 years ago

    1 comment
  • Rock, Papers, Scissors with React

    #react

    Gabriel Gusso•250
    Submitted about 2 years ago

    0 comments
  • Responsive intro section with dropdown menu


    Gabriel Gusso•250
    Submitted over 2 years ago

    1 comment
  • Responsive and functional E-commerce page

    #react#react-router

    Gabriel Gusso•250
    Submitted over 2 years ago

    3 comments
  • Dynamic notifications page with javascript objects


    Gabriel Gusso•250
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Jorge Martinez•30
    @TrueKarter
    Submitted about 2 years ago

    QR code component using flexbox

    #sass/scss
    1
    Gabriel Gusso•250
    @g-pg
    Posted about 2 years 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
  • Anisha Murthy•60
    @anishamurthy
    Submitted over 2 years ago

    QR-code project

    3
    Gabriel Gusso•250
    @g-pg
    Posted over 2 years 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
  • alesbe•10
    @alesbe
    Submitted over 2 years ago

    QR code component

    2
    Gabriel Gusso•250
    @g-pg
    Posted over 2 years 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
  • Rebecca Copeland•50
    @rebcop
    Submitted over 2 years ago

    QR Code Component Using CSS Flexbox

    2
    Gabriel Gusso•250
    @g-pg
    Posted over 2 years 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
  • Layomi1•20
    @Layomi1
    Submitted over 2 years ago

    flex

    3
    Gabriel Gusso•250
    @g-pg
    Posted over 2 years 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
  • Sumit Mukharjee•20
    @sumitmukharjeeeeee
    Submitted over 2 years ago

    QR CODE COMPONENT

    #accessibility
    4
    Gabriel Gusso•250
    @g-pg
    Posted over 2 years ago

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

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub