Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Newsletter-SignUp-form-with-Sucess-message

yagnik0 420

@yagnik0

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I fix my mobile image responsiveness? 🤔 My desktop image is keep on overlapping it any suggestion regarding it or to improve my code would be helpful.🚀

Happy Coding!🫡

Community feedback

@Farfan16

Posted

Hello Yagnik👋 I've seen your code and maybe you could try to import both images for desktop and mobile on the grid-2-col

<div class="grid-2-col>
    <img src="desktop.svg" class="main-image" /> 
    <img src="mobile.svg" class="mobile-image" />
</div>

At the media queries style, set the desktop image class display: none to hide the image, while also set it for the mobile image class when it is at desktop screen size

And then you could remove the background image in the grid-2-col class

Honestly I'm not really sure if it's the best practice for it, but I think it could help your problem 😅. Hope it would help and maybe you could find a better way to do it in the future 😁

0

Please log in to post a comment

Log in with GitHub
Discord logo

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