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 Huddle Landing Page made with Vanilla CSS

@archihalder


Design comparison


SolutionDesign

Solution retrospective


I was unable to fix the background image properly (especially for the mobile view especially). I would love to get some help on this.

  • I noticed one thing. If the illustration image is removed, then the background image doesn't change.
  • I don't know what happens if we place an image on top of a background image. The background image doesn't respond very well. ( I tried using z-index as well, but nothing happened )

Any other feedback on the project is also welcome.

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done, good effort. As for the background problem, here is why

/* remove center center, add min-height: 100vh. this should solve the background issue */
body {
    background: url("/images/bg-desktop.svg") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: var(--clr-primary-500);
    min-height: 100vh;
}

Remove the body from the first media query and place it inside the second media query. In de second media query change max-width to 380px

/* remove what's commented out */
@media (max-width: 380px) {
    
        body {
        background: url("/images/bg-mobile.svg") no-repeat;
/*        -webkit-background-size: cover; */
/*         -moz-background-size: cover; */
/*         -o-background-size: cover; */
/*         background-size: cover; */
        background-color: var(--clr-primary-500);
    }

This should do the trick

Marked as helpful

1

@archihalder

Posted

@hitmorecode Thanks a lot!

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