Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Three Column Layout

@WesleyBobb25

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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. :)

Community feedback

P

@12Kentos

Posted

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!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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