Design comparison
Solution retrospective
Update 17/07 I got some tips and finally solve the background color image and the mobile adjustment.
16/07 This is not my "ideal solution", but I decided to post to record my attempt. I tried with grid, but the background color image was (is) a big issue for me. I tried so many times, that I made two code files, and to post I chose to use media queries to transform the screen adjustment.
I have another code (flexbox) and maybe when I finish, I will post too.
Feedbacks are welcome!
Community feedback
- @Anwar11234Posted over 3 years ago
instead of using two divs: ` `` <div id="picture"> <div class="picture-1"></div> </div>
<div id="picture-mob"> <img src="images\image-header-mobile.jpg" alt="picture"> </div>```
you can use only the div with an image inside and make the color overlay using a pseudo-element, and the same code works for both mobile and desktop
I made some modifications to the index.html and style-ok.css file and sent a pull request with them.
if you don't know about pseudo-elements check these videos: https://www.youtube.com/watch?v=zGiirUiWslI https://www.youtube.com/watch?v=xoRbkm8XgfQ https://www.youtube.com/watch?v=djbtPnNmc0I
Marked as helpful0
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