3-column preview card component

Community feedback

• Account deleted

  Hey @shreyachoure,

  Great job on your first challenge. Here are a few ways you could optimize your solution

  • The body tag comes with default margin(8px). This causes the mobile version of your solution to have unnecessary space. You can remove the margin by setting the margin property to 0 inside the body tag

  body{
      margin: 0;
  }
  

  • At this point your cards are not fully stretched out in response to the window. To make each card fully stretch, so that it takes up all the space in mobile view. Remove your width specification.

  @media screen and (min-width: 321px) and (max-width: 1024px) {
      .cars {
          flex-direction: column;
          margin-left: auto;
          margin-right: auto;
      }
      ...
  }
  

  • I'm not sure you are aware of this but the media query @media screen and (min-width: 321px) and (max-width: 1024px) {...} will apply its properties when the window size is larger than 321px & smaller than 1024px. Meaning that if I were to open your website on a device that is smaller then 321px I would see the desktop version of your design. I would suggest having this media query only set to @media screen and (max-width: 1024px)

  Hope that helps, good luck on your next challenge 😉

  //Kenny

  0

  ---

  

  Shreya Choure•45

  @shreyachourePosted over 3 years ago

  @ktra99 Thank you for your help!

  0