Skip to content
OverviewSolutions
5
Comments
2

stephenlit

@stephenlit60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • stephenlit•60
    @stephenlit

    Your link to preview the site is not working,

  • Snigdha Sukun•550
    @snigdha-sukun
    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

    Newsletter sign-up form

    #pure-css
    1
    stephenlit•60
    @stephenlit

    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!