Responsive Order Summary Component

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hey, Jekari! How are you?

  I would like to give some suggestions if you don't mind.

  • Please use a separate file for CSS. Don't write css in html file. It makes your code less readable. I had to move up and down a lot to read your code.

  • Your main background is repeating. You should set "background-repeat: no-repeat;" property on body.

  • You're setting hard values for the box-width. Instead use "max-width:500px". This way box will resize automatically on the smaller viewport width.

  • Use "max-width: 100%;" on the images. Images will resize according the size of the parent container. And you won't have to change the size using media queries.

  • You can use clamp() function to change the font size, as per the viewport width. This way you won't have to resize it using media queries.

  • For the annual price box. I used flexbox. You can try and modify this demo code i wrote: https://jsfiddle.net/cvtq62oy/. It's not styled completely. I only did the layout for the price box.

  Marked as helpful

  1

  ---

  

  Jekari Rawls•80

  @Jekari99Posted over 2 years ago

  @pradeeps4ini Appreciate the feedback!

  0
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @Jekari99,

  • remove height: 600px, from box class.

  Marked as helpful

  0