Design comparison
Solution retrospective
This took longer than expected 😅
Issues I faced:
-
Mobile: This was the easiest part, only struggled a bit to get the opacity on the background. Finally got it working with a
::before
and putting a background-image on that element, but I'm not sure if this is the way to go. -
Tablet: The first issue came up to position the blue box's bottom line with the image. I went with a
max-height
on the.background
container (setting it to the image's height). Since the design shows the dotted decorative image on the bottom of the screen, I put it as a bg-image on the body's bottom line. -
Desktop: With one more media query, I positioned the content in the center and gave it a
min-height
(again, same value as the desktop-image's height). To get the blue text box aligned with the image's bottom line again, I used flexbox on the container withjustify-content: space-between
.
I added clamp()
s to have maximum responsiveness 🤠
I got the Javascript part done without having to look up stuff 🥳
Let me know what you think or if you see any errors 🙂
Community feedback
- @abdulqad33rPosted over 1 year ago
It's great. But you should definitely remove horizontal scrolling. And I think there is no need for the vertical scrolling too as this can definitely fit in the height of 100vh.
1@abdulqad33rPosted over 1 year ago@Dudeldups
In the div.background, your min-width css property is causing this...
0@DudeldupsPosted over 1 year ago@Abdul-Qad33r I didn't have scrollbars, that's why I asked. I hopefully fixed it by being
min-width: min(95rem, 100%);
🙂0
Please log in to post a comment
Log in with GitHubJoin 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