All kind of Feedbacks are welcome. Thank You!
@NaveenGumaste
Posted
Hello Sachin Mulgir ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
<body>
<main class="container">
*all you content here*
</main>
</body>
happy Coding😀
Marked as helpful
@GitHub-dev12345
Posted
Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :
in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }
in Card Design CSS Code used this property: align-self: center;
And
❤️👍 My small suggestion : 1.In Card design CSS Code Used this:
transform : scale(0.8); this property decrease the size of card. 😉
large size for increase the number of scale & small size for decrease the number of scale
I hope you find this helpful
Marked as helpful
@NaveenGumaste
Posted
Hello Sachin Mulgir ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
Always use h1 first and then h2, h3 and so on
To center the card vertically
max-height: 100vh;
display: flex;
justify-content: center
align-item: center;
happy Coding😀
@PhoenixDev22
Posted
Greeting @SachinMulgir ,
Congratulation on completing your first Frontend mentor challenge,
I have few suggestions regarding your solution:
Page should contain a level-one heading . As this is not a real webpage , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech)
Use the main landmark to wrap the body content which is the card .HTML5 landmark elements are used to improve navigation .
To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> .Remove the margin from the card
body {
text-align: center;
font-family: 'Outfit', sans-serif;
background-color: #d6e2f0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Using percentages for the width , Not a great thing as you're losing control of the layout. Use max-width:20rem instead, let it grow to a point. Then a little margin on the component or padding on the body to stop it hitting screen edges.
It's recommended to use em and rem units .Both em and rem are relative units , Using px won't allow the user to control the font size based on their needs.
Overall , your solution is good. Hopefully this feedback helps.
@SachinMulgir
Posted
@PhoenixDev22 Thank you for the feedback. I will try to work on the mentioned parts.
@denielden
Posted
Hi Sachin, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
main tag and wrap the card for Accessibilityh1 tag for the title and not p elementwidth: 20rem; to .qrBox classmargin from .qrBox classmin-heigth: 100vh to body because Flexbox aligns child items to the size of the parent containerOverall you did well :)
Hope this help and happy coding!
@SachinMulgir
Posted
@denielden Thank You for the feedback and suggestions. Will try to work on those parts.
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
