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

Responsive Website-CSS & HTML

@KatherineMarlo

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


What are you most proud of, and what would you do differently next time?

I am the most proud of configuring the responsive layout.

What challenges did you encounter, and how did you overcome them?

Major challenges until I realized that I closed my content wrapper div too early and it was causing major problems with the layout. I was really frustrated until I figured out what was going on.

What specific areas of your project would you like help with?

Please help me understand why I cannot seem to get the border-radius to work on the content wrapper div and anything else!

Community feedback

M 920

@Dev-MV6

Posted

Hi Katherine 👋, congrats on completing this challenge!

The reason you are not seeing any visual changes when you set the border-radius property to the main container is that when you set a border-radius to a container and its children have a background, that background overflows the parent element's box. Therefore, what you end up seeing are the corners of the children elements' box.

To solve this, you can simply add the CSS overflow property with a value of hidden to your .content-wrapper. This will instruct the browser to hide any overflow in the box of the element:

.content-wrapper {
  overflow: hidden;
}

I hope you find this useful 👍

Marked as helpful

1

@KatherineMarlo

Posted

This is so helpful. Thank you so much. 😊 @Dev-MV6

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