Skip to content
OverviewSolutions
8
Comments
3
Joel Ramos
@sephorus

All comments

  • Joel Ramos•185
    @sephorus

    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.

  • Joel Ramos•185
    @sephorus

    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?

  • Joel Ramos•185
    @sephorus

    Hi 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:

    1. I would add some line-height to the descriptions of the cards! 30px seemed to work for me.

    2. 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!

    3. 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.

    4. The active states of the buttons I think have been missed. The previous comment ^ seemed to mention something about this.

    5. 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 helpful