Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive flex layout

Arnav Doley• 25

@arnavdoley

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


need help in changing the image's colour

Community feedback

Fidel Lim• 2,775

@fidellim

Posted

Hi @arnavdoley,

Great job finishing the project! To answer your question, you can remove your img tag and do this instead:

.layer {
    background-color: hsl(277, 64%, 61%);
    background-image: url(/images/image-header-desktop.jpg);
    background-blend-mode: multiply;
}

This will combine both color and image. Background-blend-mode: multiply will darken the color overlay.

I hope this helps :)

Marked as helpful

1

Webothdo• 0

@Webothdo

Posted

@fidellim Thank you for this. I had the same problem but I was gonna hard code the size - this is better

0
Arnav Doley• 25

@arnavdoley

Posted

I will surely try this and may be it will also solve the responsiveness issue that Im having in mobile view. than @fidellim

0
argel omnes• 1,800

@argelomnes

Posted

Hi Arnav,

Nice work with the desktop design. I noticed that the background color is bleeding from the image in mobile. For changing the image's color, I suggest playing around with mix-blend-mode property.

Marked as helpful

1

Arnav Doley• 25

@arnavdoley

Posted

I will look into the issue. thanks for the help@argelomnes

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord