Stats Preview Card component Responsive

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted about 3 years ago

  Hi Ayush, I don't really see an issue with your CSS. However, I'd like to bring your attention to the following:

  1. Try and use rem, and % units for properties like: font-size, font-weight, anything that is content including widths. Pixels can still be used for layout purposes, things like: margin, padding, etc. Also, I'd pick one or two unit types for my CSS. I see your using: ch units as well, that's not wrong, however (my opinion) I usually work with at most two unit types - unless I need a unit type for a specific purpose.

  2. I see you've first developed your solution for the desktop then coded for the mobile, this causes a lot of headaches (did you notice your mobile version doesn't show the image). Always code up your Mobile solution first then move to the Desktop design, with an @media (min-width: 768px) query etc.

  3. Also, there's an easier way to create the purple overlay effect for your overlay, as follows:

   .image-wrapper {
     background-color: rgba(170, 92, 219, 0.25);
  }
  
   img {
   mix-blend-mode: multiply;
  }
  

  You can read more on: mix-blend-mode: multiply; here.

  4. Try and not give hard widths and heights for your <img> elements, the most I would do is the following:

   img {
     max-width: 100%;
  }
  

  Allow your content to determine the size of your containers, properties like: margin, padding, gap etc... creates the correct output (following the Frontend Mentor's design).

  Hope the above helps!

  Best of luck on your coding journey!

  Marked as helpful

  0
• 

  Ayush Sharma•85

  @ayushsh841Posted about 3 years ago

  Hi Shahin,

  Thanks for the feedback, will update the code based on it.

  1