3Column-preview-card-component using Flexbox

Community feedback

• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi Bandaru,

  Great job on finishing the project! It looks great! To answer your question, you might want to look for media queries. This will help you customize your border-radius at specific breakpoints. For instance, if you set your media query (max-width: 800px) to those divs, you will be able to add border-radius to the other corners of those divs.

  You can have a look at this link for reference: media queries

  Good luck! I hope it helps!

  Marked as helpful

  1
• 

  talentlessDeveloper•340

  @talentlessDeveloperPosted about 3 years ago

  Hi @SindhujaBandaru,

  Move your media query to the bottom of the page.

  then in your media query you should add

  @media screen and (min-width: 62.5rem) {  
   .sed {
      border-radius: 10px 0 0 10px;
    }
    
    .lux {
       border-radius: 0 10px 10px 0;
    }
  }
  
  

  then outside of your media query your .sed and .lux class should have a border-radius of

  .sed {
   border-radius: 10px 10px 0 0;
  }
  
  .lux {
  border-radius: 0 0 10px 10px;
  }
  
  

  This should fix your border-radius problem. welldone!

  Marked as helpful

  0