7 replies

are these breakpoint good practice for this website?

I am trying to make this website n wonder if the breakpoints below are ideal for this web design? https://olhanorenko.contra.com/ are there any methods to decide breakpoints n setting up container for each sections?

$XXS: 390px;
$XS: 576px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

@mixin XS {
    @media (max-width: $XS) {
        @content;
    }
}

@mixin S {
    @media (min-width: $XS) and (max-width:$S) {
        @content;
    }
}

@mixin M {
    @media (min-width: $S) and (max-width:$M) {
        @content;
    }
}

@mixin L {
    @media (min-width: $M) and (max-width:$L) {
        @content;
    }
}

@mixin XL {
    @media (min-width: $L) and (max-width:$XL) {
        @content;
    }
}

$XXS: 390px;
$XS: 576px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

@mixin XS {
    @media (max-width: $XS) {
        @content;
    }
}

@mixin S {
    @media (min-width: $XS) and (max-width:$S) {
        @content;
    }
}

@mixin M {
    @media (min-width: $S) and (max-width:$M) {
        @content;
    }
}

@mixin L {
    @media (min-width: $M) and (max-width:$L) {
        @content;
    }
}

@mixin XL {
    @media (min-width: $L) and (max-width:$XL) {
        @content;
    }
}

$XXS: 390px;
$XS: 576px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

@mixin XS {
    @media (max-width: $XS) {
        @content;
    }
}

@mixin S {
    @media (min-width: $XS) and (max-width:$S) {
        @content;
    }
}

@mixin M {
    @media (min-width: $S) and (max-width:$M) {
        @content;
    }
}

@mixin L {
    @media (min-width: $M) and (max-width:$L) {
        @content;
    }
}

@mixin XL {
    @media (min-width: $L) and (max-width:$XL) {
        @content;
    }
}

$XXS: 390px;
$XS: 576px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

@mixin XS {
    @media (max-width: $XS) {
        @content;
    }
}

@mixin S {
    @media (min-width: $XS) and (max-width:$S) {
        @content;
    }
}

@mixin M {
    @media (min-width: $S) and (max-width:$M) {
        @content;
    }
}

@mixin L {
    @media (min-width: $M) and (max-width:$L) {
        @content;
    }
}

@mixin XL {
    @media (min-width: $L) and (max-width:$XL) {
        @content;
    }
}

Olha Norenko on Contra

View Olha Norenko's Portfolio on Contra, the Independent-first, commission-free freelance marketplace shaping the future of work. Hire a freelancer today!

are these breakpoint good practice for this website?

Similar Threads

Similar Threads

Similar Threads