Flexbox used for responsive page solution.

Solution retrospective
As always, feedback very welcome...I couldn't seem to match the look of the main image to the design solution...changed all the blending modes but none seemed to be as subtle as the one in the mock-up...have I missed something? :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @PhoenixDev22
Hello Zaclobsterboy ,
I have some suggestions :
-
Use an unordered list with 3 items for the stats
<div class="stats_wrapper">
. The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. They should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item). -
border-radius
andoverflow hidden
to the main container so you don't have to set it to individual corners. -
To fix the image part:
@media screen and (max-width: 56em) .column2 { max-width: 100%; height: 350px; /* background-image: url(../images/image-header-mobile.jpg); */ background-size: cover; background-repeat: no-repeat; background-blend-mode: multiply; border-radius: 8px 8px 0 0; background-color: var(--Soft_violet); }
Hopefully this feeedback helps.
Marked as helpful -
- @arunsingh009
hey @Zaclobsterboy, nice attempt. try this, uncomment the HTML part for the image and try this in your CSS, I hope this will surely work in your case.
.column2{ background-color: purple; /*for eg */ }
` .column2 img{ mix-blend-mode: multiply; }`
Marked as helpful - @Zaclobsterboy
Hey thanks @arunsingh009...I'll try it.
- @Zaclobsterboy
Many thanks @PhoenixDev22 for these suggestions, much appreciated...
- @Zaclobsterboy
Again the image hasn't displayed, it's showing locally but not displaying remotely? The path is "../images/image-header-desktop.jpg")...what's happening? :(
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