Skip to content
OverviewSolutions
29
Comments
5

Bence Zámbó

@zambobence510 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

View more solutions

Latest comments

  • Bence Zámbó•510
    @zambobence

    Thank you very much for your valuable feedback, I really appreciate it.

  • Bence Zámbó•510
    @zambobence

    You have forgotten to close the "wrapper" div at the bottom, therefore it also includes the text at the bottom, "coded by ....". You should give padding for the wrapper that restricts the line width for both the title and the description below so that it will have the with as in the image.

    Marked as helpful
  • Bence Zámbó•510
    @zambobence

    Great job, I really like the box-shadow. :)

    I would declare a fixed width to the card. Declaring the card width in percent is using the width of its parent. In this case, the parent of the div class ="card" is the body the width of the body which is the viewport. It causes in this case distortion in different screen sizes.

    .card {
width: 300px
}

    I hope I could help you with this.

    Marked as helpful
  • Bence Zámbó•510
    @zambobence

    The semantic tags are great.

    Personally, I would not use that many compound selectors in this quite simple layout, instead, I'd use an H1 for the title and a paragraph for the text. In this case, you can declare quite easily the attributes in CSS.

    I would use a fixed width for the card and add a wrapper for the card content within the <section class = "qr-code-image-with-info"> with small padding, to solve the issue with the distortion in smaller screen sizes and to have a consistent margin.

    <section class = "qr-code-image-with-info">
<div class = "container">
     <figure class = "qr_code_image">
     ...
     <section class = "qr_code_info">
    ...
</div>
</section>

    If you follow in this way you only have to set the width of the image to 100% and by not setting height it would not distort the image either.

    You do not have to use flexbox to center the card, you can use

    .qr-code-image-with-info {
margin: 30vh auto
}

    to center it horizontally and also push it away from the top of the screen.

    I hope I could help you with my feedback and please let me know if you have any further questions.

    Marked as helpful
  • Bence Zámbó•510
    @zambobence

    Great job, semantically totally understandable, I really liked that you paid extra attention to the alternative text for the image.

    I am not familiar to React and have never used it (currently only using HTML CSS and vanilla JS) but if I were you I would put a max-width on the "stats-card" so that it stops growing until some screen width.

    In horizontal mode, the image does not reach to the bottom of the is a small purple line where the image does not reach until the bottom of the container "stats-card-img-container". You can resolve it by setting the height to 100% in the css selector "stats-card-img-container"

    A small detail I have also missed in my project is, to set the correct border radiuses of the "stats-card-img-container" and image mobile and in desktop view. (mobile - top right, top-left of the image etc.)

    I hope I could help with my input. :)

    Marked as helpful