Skip to content
Submitted 7 months ago

Responsive Website-CSS & HTML

KatherineMarlo•50
@KatherineMarlo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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•940
    @Dev-MV6Posted 7 months ago

    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•50
    @KatherineMarloPosted 7 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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