Css customization, HTML, Bootstrap Grids and Bootstrap container

Community feedback

• 

  Rio Cantre•9,650

  @RioCantre

  Posted over 3 years ago

  Hello there! Good job in completing this project. Looking at your solution, I would suggest the following for you...

  • Remove the border radius in the .container-card rule set. Add border-top-left-radius: 10px; and border-bottom-left-radius: 10px; in .card-orange and .card-green with border-top-right-radius: 10px; and border-bottom-right-radius: 10px;
  • Include media queries for the responsive design and adjust the borders into border-top-left-radius: 10px; and border-top-right-radius: 10px; in .card-orange and .card-green with border-bottom-left-radius: 10px; and border-bottom-right-radius: 10px;
  • Wrap the container with specific tag like main for readability
  • Uncomment the attribution wrap it with footer tag, add your name and links to your work/portfolio.

  Overall you did good and Hope this is helpful!

  00

  Marked as helpful
• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 years ago

  Hi Vinay, great work! For fix the corners fix the border-radius property to container-card. class. You can use firstchild and lastchild

  .container-card:first-child {
     border-radius: .5rem 0 0 .5rem 
  }
  .container-card:last-child {
     border-radius: 0 .5rem .5rem 0
  }
  

  Try to align content with flexbox and removing al margin from row and container class.

  Wrap the content page into main tag for improvide accessibility

  Also try to adding a little transition on the button with hover effect ;)

  Hope this help ;) And keep it up!

  01

  Marked as helpful
• 

  vinay kandoi•120

  @vinaximus

  Posted over 3 years ago

  Thanks a lot, didn't know about media queries, will research

  00