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

Responsive Newsletter Sign-Up with an Amazing Animation

@josuez2006

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


I faced a difficult decision on this project: using an img tag or the background-image property. From mobile to desktop, the main image changes.

Should I change the src attribute with js or how can I make the background-image grow according to its aspect ratio?

Community feedback

Rodrigo 480

@RodrigoHLC

Posted

Hey man, if I understood correctly what you mean, you might want to give your <img> element a CSS property of "object-fit: cover". Provided that the <img> is contained within a <div> or whatever containing element, if this parent element changes in size, the img size will also change but always maintaining its aspect ratio (which means the image will get clipped if the parent element has a different aspect ratio, but the image won't get distorted). If the image is not a <img> element but rather a background image, you can use "background-image: cover". This link might be useful: https://www.bisign.es/css/

Also, if I may offer some extra advice, you might want to give your .newsletter a maximum width so that it doesn't stretch too much on large screens.

EDIT: one last detail: the email address shown in the success state does not match the address the user enters.

Marked as helpful

0

@josuez2006

Posted

@RodrigoHLC thank you so much! I didn't notice those details

1

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