Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
5
Maximiliano Torres
@MaxiTRR

All comments

  • Marlon Almeida Mousquer•50
    @marlon101tkm
    Submitted over 2 years ago

    Product Preview with pure HTML and CSS

    1
    Maximiliano Torres•120
    @MaxiTRR
    Posted over 2 years ago

    Hi! Great job on this challenge! One piece of advice I can give you with your CSS code is in the media query part. You don't need to copy all the code again as it is, but you just have to select the element you want to modify and only use the properties you need to change (for example, the padding, the margin, the type of flex direction, the property of hidden, etc., but if there is code that stays the same, it is not necessary to rewrite it). This will make your code more simple, shorter and readable!

    Happy Coding!

    Marked as helpful
  • Evelyn Matos•80
    @evelyn-matos
    Submitted over 2 years ago

    Card QR-code com HTML E CSS básico

    2
    Maximiliano Torres•120
    @MaxiTRR
    Posted over 2 years ago

    Hi! Grat job in this one! I think the code is really good! Particularly, i dont like to use de HTML tags of selectors in CSS, but it really makes the code simpler and shorter, although the best practice is to use class in case in the future you decide to expand he code with more components!

    The only thing i could say of the code is, in the body selector in the CSS, the property width:100% It doesn't seem to affect the result at all, so you could have it in mind in future codings!

    Happy coding!

  • Exileurt•100
    @Exileurt
    Submitted over 2 years ago

    CSS and HTLM

    3
    Maximiliano Torres•120
    @MaxiTRR
    Posted over 2 years ago

    Hi @Exileurt! Congratulations for this challenge! I have a tipo for you: try to place this in your body css:

    body {
      display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    }
    

    This will center the whole card to the center of the screen, so yo dont have to use any margins of any kind to do it.

    Marked as helpful
  • Bambijow•10
    @Bambijow
    Submitted over 2 years ago

    QR Code Component

    3
    Maximiliano Torres•120
    @MaxiTRR
    Posted over 2 years ago

    Hi! Very good! I can suggest you, if you want to center the components for this types of challenges, to use

    body {
      display:flex;
      justify-content:center;
      align-items:center;
    }
    

    This will center your whole component without using margins of any kind, making more easy the responsiveness. (it is not a good practice doing this in a more complex project from waht i have understand, but it works fine whith this cahllenges)

    Marked as helpful
  • Roxanne•260
    @rox-stahl
    Submitted over 2 years ago

    QR Code Component

    1
    Maximiliano Torres•120
    @MaxiTRR
    Posted over 2 years ago

    Hi! It look very good! Checking your code i recommend you to use:

    body {
      display:flex;
      justify-content:center;
      align-items:center
    }
    

    This will center the container to the center, without using any margin to place them, so yo can not worry if you modify or added more divs or containers in the future. However, i think it is not a good practice apply a display propertie in the body, but for this challenges of one component only it makes the trick!

    Marked as helpful
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