Submitted 7 months ago

Newsletter sign-up form

pure-css

Snigdha Sukun•550

@snigdha-sukun

A solution to the Newsletter sign-up form with success message challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of learning how to use custom marker in ul:

ul {
    list-style: none;
    padding-bottom: 1em;
}

ul li:before {
    content: url('./assets/images/icon-list.svg');
    margin-right: 1em;
}

What challenges did you encounter, and how did you overcome them?

I faced a challenge to get the dismiss button in the correct position in the mobile view. But after some trial and error, I was able to get it right:

.success-message {
    padding: 1em;
    position: relative;
}

    .dismiss-btn {
        position: absolute;
        bottom: 1em;
        width: calc(100% - 2em);
    }

What specific areas of your project would you like help with?

Responsive CSS & JS do's & don'ts

Code

Please log in to post a comment

Community feedback

stephenlit•60
@stephenlit
Posted 7 months ago
Great Job!

Looks really good! I notice in your mobile view the heading image slides down when you shrink the size down to 375px. I believe this is because of your align-items in your <main>.

After your media query try adding a align-items: start to your main.
```
main {
    background-color: var(--white);
    align-items: start;
}
```
I think this will stop the heading image from moving down as you shrink the screen size. I hope this was some help in some way, of course I could be wrong as well lol

cheers!

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