Submitted over 1 year ago

responsive page using SCSS and flexbox

ashleyftw•120

@ashleyftw

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

had some trouble with the background pattern... for some reason I had to add a transparent border to the body in order for the background pattern to show up at the right position. Did anyone run into this issue?

Also would love feedback on how to organize media query better. Thanks!

Community feedback

Durban86•320

@Durban86Posted over 1 year ago

An easy way to set up the background is putting this in your mobile media query

body {
        background-image: url(images/bg-pattern-top-mobile.svg), url(images/bg-pattern-bottom-mobile.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top left, bottom right;
    }

And this in your desktop media query

body {
        background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top left, bottom right;
    }

Marked as helpful

ashleyftw•120

@ashleyftwPosted over 1 year ago

@Durban86 thank you so much!! This is so much cleaner!

Please log in to post a comment

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