Product Preview Card Component - Solution

Community feedback

• 

  Yash Joshi•450

  @yashgjoshi20Posted over 1 year ago

  1. You should use grid-column to get the images and the Features separated side by side.
  2. When you do that then its simple CSS to get the sizing right.
  3. The Container would help in this to get the perfect sizing.
  4. Also for the button you can resize it using padding or margin depending on your choice. 😌

  Marked as helpful

  0
• 

  P

  Genie 🧞‍♂️•100

  @EugeneCarbadoPosted over 1 year ago

  I would say you definitely need to set a fixed width and height for the container. That is why, looking at your preview site, the whole element keeps resizing. Setting the width and height with rem or px in mobile and then desktop would give the results you desire and stop it from resizing when you expand the window. Have a look at the design and see if you can figure out how much rem or px you will need :)

  Marked as helpful

  0

  ---

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @EugeneCarbado giving a fixed height must be avoided in almost most of the cases for text containing elements as this will cause various issues such as content overflow with changing data, or simply when user change the base font-size. The height should be determined by the content of the container. Tweak it with paddings or margins if needed.

  Using px should also be avoided as much as possible, instead use either rem or em. Both are responsive, px is not.

  In this challenge the main container needs only a max-width and nothing else. Columns can have 50% width.

  @EnidaShehu nice work overall! However it looks like you have set breakpoints too high, like 1452px. Given that the container has only around 600px width, setting breakpoint at around 650 or 700px etc. should suffice. 1440px and 375px describe only how the design of the challenge should look like at those browser-widths, so you can adjust breakpoints according to ur needs.

  Keep up the good work!

  Marked as helpful

  0