Mobile-First solution with CSS Flexbox

Community feedback

• 

  Anna Leigh•5,135

  @brasspetals

  Posted about 4 years ago

  Hi, Sintaxis! Welcome to Frontend Mentor and congrats on completing your first challenge! The mobile styles look great and respond well. The desktop layout (1300px+) looks good too! 👍

  A few suggestions:

  • Adding a <title> to your head should fix the errors in your report.
  • For the coloring on the image, you actually don’t need to use a pseudo element or the “pink” div. A simpler way to do this would be to first delete the ::before and pink div. Then set the background-color of the .container-img to the soft violet. Finally, add mix-blend-mode: multiply to your img along with a slight opacity. Somewhere around 0.8 looks about right.
  • Instead of switching between two img tags, I suggest checking out the picture element, which is incredibly useful.
  • From 600px - 1300px the card layout gets very squished and the layout breaks. Would be worth taking a second look at to see if you could improve the layout for tablet widths. object-fit: cover might be useful on the img while you're adjusting things.

  Hope some of this helps! Happy coding! 😄

  21