Responsive project preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👋 Hello Isinkaye, congratulations for your solution!

  1. I saw your solution and to make your card component more flexible, try to avoid the use of fixed values, I saw that you used % for the card width and px for height. Try to use max-width for the card width, this way the card will stretch in a width under 350px, for example .container {max-width: 350px; instead of using width: 30%, and for the height you dont need to set a value, using the padding for the headings, paragraphs and button your card will automatically grow without you need to set a height.

  2. For the mobile version you can set some different sizes for the fonts and set properties like flex-direction, if you`re using flexbox. You'll need media queries to define when the website will change from desktop to mobile.

  Determine breakpoints for the component depending of the device/width using media queries. You can have more info about media queries here:

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  You can also check how a did with the media queries in my solution for the same challenge:

  https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa/hub/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  I hope it helps you!

  Marked as helpful

  0

  ---

  

  Isinkaye Praise•150

  @Bebe-devPosted over 2 years ago

  @correlucas Thank you

  0