Skip to content
Submitted 12 months ago

Responsive Newsletter Sign-Up with an Amazing Animation

Josué Zalazar•80
@josuez2006
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

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
    @RodrigoHLCPosted 12 months ago

    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
    Josué Zalazar•80
    @josuez2006Posted 12 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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