Skip to content
Submitted about 3 years ago

Three Column Layout

Wesley Bobb•20
@WesleyBobb25
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My main concern is I think the typography was a little bit off and do you think I needed to adjust the line height and/or the line spacing?

Also, I had to target the first and third column to apply the border radius as when I targeted the parent container (.cards) the border-radius property never seemed to work. Does anybody have an explanation they can help me out with?

Any other suggestions are more than welcome as I'm sure there are multiple errors here somewhere. :)

Code

Please log in to post a comment

Log in

Community feedback

  • Kent O'Sullivan•1,870
    @12Kentos

    Hey @WesleyBobb25,

    Nice job on finishing this project! It looks great! :)

    As for your questions, yes I think the line height could be adjusted, but overall I think you did just fine on the challenge.

    Secondly, as for trying to put the border radius on the parent container, this will work just fine as long as you also set overflow: hidden;.

    The reason for this, is the border radius takes affect, but the child elements will overflow the container, as soon as you set the overflow to hidden, the corners that are overflowing the parent element will disappear and you will have rounded corners. :)

    lastly, I took a look at your code and I noticed you selected some elements directly like so.

    h2 { color: hsl(0, 0%, 95%); padding-left: 20%; text-transform: uppercase; font-family: 'Big Shoulders Display', cursive; font-size: 2rem; }

    I would highly suggest you avoid doing this, I understand this was a small project, so it doesn't really matter too much in this scenario, but if you get into the habit of selecting them directly like that, it Will cause you a lot of headaches in future projects where you have multiple h2 elements on the same page.

    Hope that helps!

Join 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