Single_Price_Gride_Component

Community feedback

• 

  philale•350

  @PhilalePosted about 2 years ago

  Hey, Congratulations on completing the challenge! It looks very good, with the higher border-radius even better than the design in my eyes.

  One thing you could improve is using the min() and max() css functions to implement responsiveness. Here is an example:

  Instead of writing:

  .box{
      width: 45%;       
  }
  
  @media screen and (max-width:575px){ 
      .box{
          width: 80%;                       
      }
  }
  

  You can use the min() function, like so:

  .box{
      width: min(750px, 80%);      
  }
  

  This just says that it will use the value, that is smaller. That means, if 80% of the screen width are smaller than 750px, the 80% will be used and vice versa. There will be a quite different behaviour than the one now visible, but it is also removing the "jump" from 45% to 80%.

  Try it out, it can really help and will clean up your css code!

  Marked as helpful

  1

  ---

  

  Eddy Sea•90

  @EddySea69Posted about 2 years ago

  @Philale Thank you very much for the tip, I will definitely implement the changes as soon as possible.

  0