Recipe Page Solution

Community feedback

• 

  Leon Potgieter•290

  @leonp84Posted 9 months ago

  Hi Wanjiru, try nesting your .container divs within a larger outer div. Give the outer div rounded corners and leave the inner ones alone (except for maybe adjusting the size, making it slighly smaller than the outer div, so that the rounded corners will be visible).

  <div class="rounded-corner-container">

    <div class="container">
    </div>
    <div class="container">
    </div>
  

  </div>

  Marked as helpful

  0

  ---

  

  Wanjiru-M•60

  @Wanjiru-MPosted 9 months ago

  @leonp84 Thank you. It has worked.

  0
• 

  AEX•250

  @dev-aexPosted 9 months ago

  Nice Work Wanjiru!

  The problem you are mentioning is because you are using the same class on different divs:

  <div class="container"></div>
  

  All the <div> tags that have the .container class, will have the border-radius. So the solution for that is to create a class only to apply the border-radius to the container that you want:

  HTML:

  <div class="container border"></div>
  

  (Your can apply multiple classes to a <div> just separating them with a space. Here the <div> have the class "container" and the class "border")

  CSS:

  .border {
  border-radius: 10px;
  }
  

  0