Mobile-First solution with CSS Flexbox

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 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! 😄

  2

  ---

  

  Sintaxis Dev•50

  @SintaxisDevPosted over 3 years ago

  Yes! Thank you. I had a title, don't know what happened haha. For the responsive part, i understood that the page should fit well on 1440 and 375px, not on tablet widths, but it's a great thing to think about next time. I did the mix-blend-mode thing but can't get the color i wanted so... Either way, greatly appreciate the feedback. I've been in this dev world for just couple of months, but i'll continue improving!

  0