Skip to content
Submitted almost 3 years ago

Responsive Landing with CSS Grid

Ishmael•330
@Ishmaelsealey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi. My question is about the border-radius: ; aspect of the section. I tried putting the border-radius: 5px; on the container of the entire section, but that didn't work.

To resolve that I went ahead and made each section have a separate border and change that using a media query for desktop screens.

While this works fine, my issue with this is that it's repetitive and would be more intuitive if I could put the border on the containing section.

Any comments on what I could do will be appreciated :D

Community feedback

  • BadT•230
    @saodinhPosted almost 3 years ago

    You can set the <main> element {border-radius: 5px ; overflow: hidden}. The overflow hidden is what you are looking for here.

    Marked as helpful
    1
    Ishmael•330
    @IshmaelsealeyPosted almost 3 years ago

    @saodinh Thank you very much!

    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