Design comparison
Solution retrospective
I would be happy to receive some feedback on the positioning of the various elements and the use of css grid.
Community feedback
- @tomiwaorimoloyePosted over 3 years ago
Your version looks good. I think a bit more padding could help.
Marked as helpful0 - @Rezzak48Posted over 3 years ago
It is Perfect, I really like it, I had some issue with the border of the image and I took a look at your code, I have only a few notes and a question : 1/ name of the classes: as I said before your work is so professional, how you work with HTML syntax, variables... etc, but name of classes is a little bit hard to follow if you work inside a team, I suggest you to take a look on Case Styles , check here :(https://betterprogramming.pub/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841) 2/ the design is not fully responsive ( check design at 1083px width), and the reason of that is that : @media (min-width: 1000px) .card { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(3, 1fr); margin: 10rem 5rem; height: 450px; /* width: 1000px; */ <== here you put a fixed width, which is make it fixed and not responsive with bigger screens and around it (try to put for example width= 80%; and this is just my initial point of view I am sure there is a better solution out there...}
otherwise, I see that everything is good and professional, I have just a question how did you know exactly, pixels of margins (are u using version pro?)
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