Responsive using custom CSS Single price grid component

Community feedback

• 

  Shahar Levy•85

  @monodonBrandPosted over 4 years ago

  Hello Harshit,

  1. Design: the best way to get the design perfect for these challenges is to use a browser extension like pixelperfect that let you see all the small differences between the mockup and your code. But just from looking at it quickly, you have different spacings and sizes for the headers, the lower right block background color is not accurate, the text on the button is not accurate, the price is bigger then the mockup and the per month should not be aligned to the bottom. There are more inconsistencies but they can all be solved with pixelperfect extension. It's very very hard and takes much longer to get all these things right just by eye training so I really recommend you use it in your next challenges.

  2. Responsiveness: Your design does not brake in small sizes but not going mobile first made you keep the desktop layout for much too long.You should move to a single column design at about 600px width and adapt spacings around the component so you have more room for text and button. Right now at 650 about 50% of your width is the background and things get squished and long. I suggest building the mobile design first then adapting it as screen size grows. Usually you can adapt spacing and margins and font sizes an only after at about 750 and bigger (sometimes even only at 1000+ width) move to multi column layout.

  3. Functionality: I'd add a hover style to anything a user can interacts with, so in thins case the button.

  1

  ---

  

  Harshit Kumar•105

  @HARSHITKUPosted over 4 years ago

  @monodonBrand Thankyou so much for a keen observation on my solution I really appreciate your effort and I will follow all the guidelines as stated and take care of everything.

  0