Three Column Preview Card using basic CSS custom properties
Design comparison
Solution retrospective
Hi Guys! 😊
In this project I had a hard time positioning the elements so that everything fit on the page, without having to scroll. (Desktop)
Sometimes I feel like I add a lot of justify-*
or align-*
without need. It still gets confusing when I use display: grid
or display: flex
.
As I didn't study Media Query and I only used them a few times, I don't know if I used them correctly.
What did you think? Could you give me feedback? Did I use Media Query correctly?
Community feedback
- @Naveen-CBPosted 11 months ago
Hi Rachel Pizane, I have seen in your code you are using pixels unit for fonts it not effective incase responsiveness so, try to use em or rem for fonts. I also see this in your code: main { place-self: center; }
.box { display:flex; margin: auto; width: fit-content; border-radius: 5px; overflow: hidden; box-shadow: 1px 1px 7px #cccbcb; } you wrapped your content with div class="box" even there is main to wrap everything so I suggest you to use main directly to style or give class to the main
overall your code is good and clear do this simple steps to achieve even more simple and clear code.
Marked as helpful1 - @danielmrz-devPosted 11 months ago
Hello Rachel!
Your solution looks excellent!
About your question on when to use flex or grid:
Flex is recommended when you have to work with a horizontal OR a vertical container. Rows OR columns.
Grid is recommended when you have to work with both rows and columns simultaneously inside a container.
This project has a big horizontal container with three smaller vertical containers. Flex is good for cases like this.
I hope it helps!
Marked as helpful1 - @purrrpleliptonPosted 11 months ago
I believe as a developer - a relatively new one at that - you do whatever you have to do, to get the desired result, so don't worry yourself too much for using a particular property too much. somthings i noticed:
- you don't want to hardcode the height of the body, instead of
height: 100vh;
usemin-height: 100vh;
instead - padding on the body too isn't necessarily bad, but it isnt commom practice
to name a few, overall, good job
Marked as helpful1 - you don't want to hardcode the height of the body, instead of
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