@suhaybjirde
Posted
i did it with grid check it out i you need itβ€
Marked as helpful
Feedbacks will be welcomed !!!
The project was finished within one hour. It is a great achievement for me.
One question for the community though, how to do it with grid instead of flex ?
@suhaybjirde
Posted
i did it with grid check it out i you need itβ€
Marked as helpful
@denielden
Posted
Hello Roy, You have done a good work! π
Some little tips to improve your code:
font-family:" Big Shoulders Display ", cursive
the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif
much more similar to the primary font.min-height: 100vh
to .container
class instead of height
, otherwise the content is cut off when the browser height is less than the contenttransition
on the element with hover effectKeep learning how to code with your amazing solutions to challenges.
Hope this help π and Happy coding!
Marked as helpful
@arkaroy135
Posted
@denielden I appreciate the tips. I will remember to use sans-serif as the backup font. And thanks for the min-height tip, it is most helpful. And as per transition effect, I forgot to include the hover effect in the project. Thank you for reminding me of that, and also thank you for your valuable feedback. Hope you will check my next projects too.
@denielden
Posted
@arkaroy135 Sure! you are welcome and keep it up :)
@DavidMorgade
Posted
Hello Roy! Great job finishing the challenge, for me it looks great on mobile and desktop sizes, nice.
To answer your question, you can easily archive the same result with grid, you won't need to use flex at mobile sizes, just grid at your 1280px media querie.
You can try it at your own doing this:
.container .card
remove the display: flex
..container .card
selector the property display: grid;
.container .card
grid-template-columns: repeat(3, 1fr);
With these properties your layout at mobile sizes will stay the same (because those block elements stacks one on the other as they have display: block
by default), and with the display: grid
at 1280px you will have 3 columns of the same size (grid-template-columns: repeat(3,1fr)
)
Hope my answer helps you!
Marked as helpful
@arkaroy135
Posted
@DavidMorgade Thank you for the tips. I really appreciate those. I now understand how to use grid layout after reading your tips. Thank you very much for those and hope you will see some improvements in my codes. I will wait for your feedback on my next projects.
@VincenzoMuolo
Posted
Hi there, the easier way to achieve that is (in my opinion) to do something like this.
The sample is pretty raw but hope i gave you the idea of how to do it!
As you see the key is to use column-template-columns and column-template-rows.
Cheers
Marked as helpful
@arkaroy135
Posted
@Shirohige-96 Just checked your code for this project. Really love the dark mode. I will integrate that on my projects in the future.
@VincenzoMuolo
Posted
@arkaroy135 Glad you like it!
@suhaybjirde
Posted
perfect you did well
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