flex box or grid which I should use
Joel Ramos
@sephorusAll comments
- @hameeshaSubmitted over 3 years ago@sephorusPosted over 3 years ago
I think that I used flexbox for my solution. When it went from desktop to mobile layout, I just changed the flex-direction on the card container I had.
You can check it out here: https://sephorus.github.io/three-column-challenge/
Note: you can use either flexbox or grid! Up to you really.
0 - @sephorusSubmitted over 3 years ago@sephorusPosted over 3 years ago
The only thing I was unhappy about with my solution is that if you go to the live site
https://sephorus.github.io/three-column-challenge/
and inspect (via F12 on Chrome) the cards themselves, it looks like the content is overflowing the card. Any suggestions on how to fix this?
0 - @javieralas05Submitted over 3 years ago
I tried using flexbox for initial positioning and grid for the card. I used sass as my pre-procesor of choice. My main goal was to make it a simple as possible, any observation is highly appreciated.
@sephorusPosted over 3 years agoHi Rodrigo,
Nice work on this challenge! I just completed this one as well. I have some feedback that I think would help your solution match the design files just a little bit better:
-
I would add some line-height to the descriptions of the cards! 30px seemed to work for me.
-
All of the car titles (SUVs, Luxury, and Sedans) are all uppercased in the design files. Use some text-transform: uppercase; on your titles to make it match!
-
Very small margin changes - I would add more of a margin between the button and the description, and decreased the margin between the title and the paragraph.
-
The active states of the buttons I think have been missed. The previous comment ^ seemed to mention something about this.
-
This is also super picky, but thought I would mention it anyway. The text on the cards in the design files looks a little bit faded. I would play around with the opacity to try and match it.
Overall, good job! You can check mine out here if you'd like: https://sephorus.github.io/three-column-challenge/
Marked as helpful0 -