Design comparison
Solution retrospective
Building mobile first and changing layout with media queries and css flexbox and grid. I should try and clean up my css
What challenges did you encounter, and how did you overcome them?Unsure how to add a background image with a color overlay
What specific areas of your project would you like help with?How do I add the header images so they expand off the sides as the design file shows
Community feedback
- @lkosterPosted 3 months ago
For your issue with the header images, you can set a negative left/right margin. The max-width on the header-wrapper is not allowing the images to go over to the edge of the screen. There must be anoter property that is minimizing the pictures when you remove it (I tried in inspect). I was able to acheive it by applying the css below. You can try this to see the expect result. From there you can try to fix the issue with removing max-width.
.left-image { margin-left: -32px; } .right-image { margin-right: -32px; }
.header-wrapper { display: flex; /* flex-direction: row; This is the default so it can be omitted*/ justify-content: space-between; /* < add this to push the images to the edges of the screen / min-width: 100vw; / < I changed this to "min" instead of max since removing width specification minimizes the images; you'll have to troubleshoot that */ align-items: center; }
This will get you started with how to move things out of their container.
Marked as helpful1
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