Looking to hire developers?
Hi, it was great fun coding this challenge. But I don't know how to deal with the effect or mask of the image background for the mobile version. I tried different solutions and kept the one that I prefer. If anyone has a suggestion on this particular point, I would appreciate it for sure. Thanks for reading me and looking at my solution.
@AryaAnish121
Posted
Hi Sylvain,
95% perfect
One suggestion:-
Happy Coding!
@longani974
Posted
@AryaAnish121 Thanks, I hadn't even noticed. It's even weird, I generate a new screenshot but the bug is still there.
@sarahc-dev
Posted
Hey!
When I view your site, it doesn't scroll down to reveal the form part. You should set min-height, instead of height to 100vh. Then on different screen sizes, it will allow you to scroll if it doesn't fit in the view. I believe you don't need to use 100vw as well.
For the mask effect, I used: background: linear-gradient(rgba(18, 23, 37, 0.9), rgba(18, 23, 37, 0.9)), url(./assets/mobile/image-host.jpg);
Then on the larger screen sizes I used a media query to change the background to the solid color.
Hope that helps :)
@longani974
Posted
@sazzledazzle Hello, I removed the width and height and the overflow: hidden. Now the site is working properly. I replaced the mask effect with your solution and it works much better. Thank you very much who was very helpful.
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
