Html and css(from scss) only preview card.

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Congrats on submitting your first solution! 🎉

  You actually don't want a blur here. To achieve the look, simply add opacity: 0.8 to your image. You might have to play around with the opacity to get it just right, but somewhere around .8 looks good. Adding display: block to your img will also help it fill the whole div.

  I'd move your max-width media query up much higher, as the mobile/vertical layout would fit much earlier. Somewhere around 800px or 900px could be good. To prevent the layout from getting too stretched, you could add something like max-width: 500px to your container for mobile.

  Marked as helpful

  1

  ---

  

  Piotr•190

  @LenyPythonPosted over 3 years ago

  @brasspetals Thank you, I was wondering about the change of media query. Did use your advice and it looks almost perfect.

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @LenyPython Awesome! Figuring out breakpoints can be tricky, but MDN has a great article about it, which you might find helpful. 😄

  1
• 

  Mardiya•55

  @Mardiya07Posted over 3 years ago

  Hi Leny. Great job on trying out the challenge. To implement a blur effect you could use filter: blur(px); -webkit-filter: blur(8px); on the element that has the background image applied to. Also seems the page isn't responsive yet. In terms of a mobile view

  1