Design comparison
Community feedback
- @VictorResinesPosted almost 2 years ago
Hi @roxana-lupu!
I just did this challenge on the weekend =)
I noticed is that the shadow for the card is missing.
To achieve this you could add a box shadow on your
.card_container
I used the following parameters:
box-shadow: 0px 20px 30px 10px rgba(0, 0, 0, 0.05);
These values refer to: offset-x | offset-y | blur-radius | spread-radius | color
You can fin out more about box shadow >here
Hope you find these feedback helpful! Everything else looks good to me, happy coding!
0 - @HassiaiPosted almost 2 years ago
Replace <div class="box"> with the main tag and <h2> with <h1> to fix the accessibility issues. Give .box a fixed width value instead of percentage width value. Replace the width of .box with a max-width for a responsive content. e.g.:
.box{ max-width: 320px ; }
Give .qr-code-img a max-width of 100% instead of width 100%
To center .box on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful. HAPPY CODING
0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your first challenge!🎊🎆
- Do not forgot to check your FEM report, to see what is incorrect and update your code with it.
- It is best practice to have separate files for you HTML and CSS code. It helps keep things organized and make it easier to maintain.
- The
alt tag
description for the “QR image” needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.
- Do not use percentages for your component's container as it cause it to grow/shrink indefinitely, which will cause your component to warp.
- To properly center your content to your page, you will want to add the following to your
body
element (this method uses CSSGrid
):
body { min-height: 100vh; display: grid; place-content: center; }
More Info:📚
[Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]
- Change
width
tomax-width
in your component’s container to make it responsive.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord