Single Price Grid Component

Community feedback

• 

  Anton•515

  @antaryaPosted over 3 years ago

  Great job, it looks really good.

  I have a couple of suggestions, though:

  1. Instead of using specific min-width, min-height on the body tag, make it so it can adapt to any string size. Otherwise, If you try to increase the sentences of the first paragraph and view it on the 400px screen - part of the container would be not visible. In the real application, that string may come from DB, or it is translated, so string length is not predictable.

  The solutions that might work would be:

  • Move flex related properties from the body tag to the main tag and add min-height: 100%; - which will allow to centre container properly.
  • Create an additional tag and apply container class to it instead of the main tag; add max-width: 640px; so the container will not be bigger than some threshold.

  2. There is an opacity applied to the whole third section, which makes all inner elements also be opacified (hope this is the right word :)) Why not use just background-color of a specific colour?

  3. It is a matter of taste, but the list under the "Why Us" section is harder to read because of applied letter-spacing. It makes sense for "per month" string visually but in the case of the list, I think it is redundant.

  4. If you zoom to the bottom left || right corner of the container; there is a white background that is visible where border-radius is applied. It might help to move the border-radius to the container instead.

  ---

  Browser Version: 92.0.4515.107 (Official Build) (64-bit) OS: Ubuntu 20.04

  ---

  I am new to this platform; if I missed or misunderstood something, I will appreciate the feedback.

  Marked as helpful

  1

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @antarya Thank you for the detailed feedback - much appreciated :)

  1. will try this out, you are right it should account for different string lengths (I guess my main issue here was trying to get it to perfectly match the design)

  2. that was a bit of laziness on my part (didn't want to define a new color so got it quickly from the first one :)) )

  3. fixed that (kinda' annoys me the text doesn't seem to look exactly like the one in the picture)

  4. totally missed that :D Again, thank you for taking the time to check it out!

  0
• 

  Ahmed Faisal•5,095

  @afrusselPosted over 3 years ago

  Nice work :)

  1

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @afrussel Thank you! :)

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  you should add a :hover state to your button

  1

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @palgramming Thank you for the feedback, good point :)

  0