Skip to content
OverviewSolutions
6
Comments
9
Nícolas Gabriel
@Nick-Gabe

All comments

  • Nícolas Gabriel•140
    @Nick-Gabe

    I was going to suggest you to put a space between the text and the button, but you already made that so yeah, I have to agree with you, wow awesome! :D

  • Nícolas Gabriel•140
    @Nick-Gabe

    Hey Luca, what's up? Your solution is really good, the spaces between buttons, the width of the boxes, everything perfect! :)

    I only have a few suggestions for you:

    • On this case, instead of flex, try using grid. It will not change the visual itself, but for me its a good opportunity to train it while making everything responsive.
    • The boxes have borders on every side, but on the design they should appear only in the corners of the boxes. You used the border-radius shorthand right, but by adjusting the values you would get a better result.

    That's it, see ya Luca 👋

  • Nícolas Gabriel•140
    @Nick-Gabe

    Hi Arthur! Your solution is really responsive, good job.

    But I would suggest you to use landmarks inside your body, they are super important for accessibility. You can see about it right here: W3schools - Landmarks

    And at least for me, the stats tab makes more sense to be an unordered list instead a div.

    Nice solution, see ya Arthur👋🙂

    Marked as helpful
  • Nícolas Gabriel•140
    @Nick-Gabe

    Hi Ibrahim! Great you completed the challenge. I couldn't see your code, because the link may be wrong, but by looking at the website I have some suggestions:

    Im on mobile right now, and the qr-code container is really tiny. To make it responsive, one of the approaches is making a variable width (using % or vw) and a fixed max-width so it doesnt stretch forever. The same can be applied to height.

    If you have any questions, feel free to ask.🙂 See ya

  • Nícolas Gabriel•140
    @Nick-Gabe

    Hi Adithya, good solution! Im on mobile and it looks pretty responsive.

    One suggestion I give you is to use landmarks, they are really helpful for accessibility purposes, making easier for a screen-reader user to navigate through your page.

    I reccomend W3schools to learn that topic.

  • Nícolas Gabriel•140
    @Nick-Gabe

    Im really impressed with your result, you surely took the challenge even further. 👏👏

  • Nícolas Gabriel•140
    @Nick-Gabe

    Amazing result! great responsivity aswell

  • Nícolas Gabriel•140
    @Nick-Gabe

    Good work, very organized html! :)

    I noticed your qr-code is on the upper left. A tip I give is that to center the container on the screen, one option is using flexbox on the body and defining a height (100vh is good for desktop, but doesn't work well for mobile) and a witdh (100%).

    body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    Links if you want to see more: Flexbox, Css Units(vh, vw...)

    Marked as helpful
  • Nícolas Gabriel•140
    @Nick-Gabe

    Awesome implementation and good semantic, congrats! But I would suggest to define a max-width in the .container, because for some screen sizes below 1024px like 1000px, it stays at 89% of the screen because of the content:

     ​.​container​ { 
 ​  ​padding​:​ ​1​rem​ ​1​rem​ ​2.6​rem​ ​1​rem​;
   // max-width: ...
 ​}
 
 ​.​content​ { 
 ​  ​width​:​ ​89​%​; 
 ​  ​margin​:​ ​0​ auto; 
 ​}

    Cheers✨