Design comparison
Solution retrospective
I'm not sure how to make the html, do I put too many div? what do you think?
Community feedback
- @AliNemattPosted over 2 years ago
Hi Benjamin, congratulations for your solution!
I saw your code and I have some recommends for you!
- It is customary to use
style.css
for main stylesheet , So it's better to usestyle.css
instead ofindex.css
. - It's not necessary to use same codes for responsivity! for responsive design just change the variable property . for example: if your
width
in desktop is same with mobile just skip it! and remember that always style desktop at the first! - about your HTML ,
containerQr & containerImg & containerParrafos
aren't important. for example : HTML :
<div class="mainContainer"> <img src="images/image-qr-code.png" alt="Qr"> <h1>Improve your front-end skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div>
and your CSS :
body { background-color:var(--Lightgray); height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 10px; font-weight: 700; font-family:'Outfit', sans-serif; text-align: center; color: var(--Darkblue); } .mainContainer{ background-color: var(--White); border-radius: 12px; display: flex; align-items: center; flex-direction: column; width: 300px; height: 480px; }
Hope it helps you! Wish you the best.
Marked as helpful0 - It is customary to use
- @itbeginswithiPosted over 2 years ago
Congrats on your first project on frontend mentor, Benjamin.
The html seems good to me, the css on the other hand is not.
@media queries are meant to add changes for different viewports, they don't interfere with the browser's access to the lines above or below it, that's why you don't need to include the whole styling of your website within every media query (:root variables can stay outside, on the top of your css file, unless they are meant to add changes for smaller or larger screens).
To learn more about stlying responsive websites, I suggest you start with the following youtube video: https://www.youtube.com/watch?v=VQraviuwbzU
Good luck!
Marked as helpful0 - @coding-tomatoPosted over 2 years ago
I think the HTML is fine! Good work.
Seems like the font-weight for the description is off. Other than that it looks good!
If you wished to work further on it, you could add some responsiveness by making the width of the card have a max-width and a min-width, and have the width be 100%, so it stretched a bit depending of the phone's screen width.
{ min-width: 200px; width: 100%; max-width: 300px; }
A similar approach would be to instead use clamp, to clamp the width between a set of values:
{ width: clamp(200px, 100%, 300px); }
To make these changes effective you'd need to make some adjustments on the padding of the card, among other things.
Marked as helpful0
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