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

Huddle Landing page HTML/CSS

Ryan• 95

@r-findley


Design comparison


SolutionDesign

Solution retrospective


Hi all, here's my 2nd completed challenge. I worked with 2 separate style sheets on this one, using 1 for mobile and 1 for desktop. I like this approach as I felt it was easier to find my adjustments but there's still some learning on my end for this.

Community feedback

Roman Filenko• 3,335

@rfilenko

Posted

Hi, my advice - use just one css file, start from mobile and adjust, add more styles when needed. One file - less additional requests. Learn some preprocessor later on to improve code structure, dividing into smaller parts. Looks good on mobile 😉

Cheers, Roman

1

Ryan• 95

@r-findley

Posted

@rfilenko thanks for the feedback on that. I thought the mobile looked better and was easier to design as well. I struggled with the use of separate background images for the different layouts. I couldn't seem to get the mobile background image to go away when I relied only on 1 style sheet which led me to try 2.

0
P
Robert McGovern• 1,095

@tarasis

Posted

@r-findley use a media query in the style.css and it will override the one you set first.

@media screen and (max-width: 600px) {

    body {
        background-image: url("../images/bg-mobile.svg");
        background-repeat: no-repeat;
    }
}

(I did desktop first when I did this challenge)

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