Kevin Powell - Community•17mo ago

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;
    }
}

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!

5 Replies

Rägnar O'ock•17mo ago

As the name suggests, breakpoints are for something breaks. You don't need to use any specific breakpoint if your content displays fine at every screen size. So if you see your design breaking at a given size, that's your breakpoint

Kevin Powell•17mo ago

To build off what Ragnar said, which I'm in total agreement with, unless it's a complex site with a lot of moving parts, I find 2 breakpoints is often fine, and sometimes you can get away with using just 1.

redtypoOooOoOP•17mo ago

hi, there. Yes, I understand that but to implement it in a specific case, I am confused. I would appreciate it if someone could walk through it with me. Here is my obeservation of this design: at 576px,hero button gets smaller, all container margins change; at 768px, basically everything changes; at 992px, some fonts size and margins change; at 1440, margins change. ( <576px as the base style(as mobile first); ) so 4 media queries? as: 576~768px; 768~992, 992~1440, >=1440? if says need around 2 media queries, how to implement the rest of the design changes? hi Kevin, I have watched some of your videos abt responsive layout and I understand the general rule of breakpoints but to implement it in a specific case, I am confused. I would appreciate it if someone could walk through it with me. Here is my obeservation of this design: at 576px,hero button gets smaller, all container margins change; at 768px, basically everything changes; at 992px, some fonts size and margins change; at 1440, margins change. ( <576px as the base style(as mobile first); ) so 4 media queries? as: 576~768px; 768~992, 992~1440, >=1440? if says need around 2 media queries, how to implement the rest of the design changes?

Kevin Powell•17mo ago

As I said, it does depend and there are times you need more. If the design calls for it, then you're definitely allowed more 🙂

redtypoOooOoOP•17mo ago

i see, i see, just wanted to talk with ppl that has experience to see their opinions on this case bc i have changed the breakpoints before n kind of a chores to rewrite the codes. thanks for the reply!

Gaming

Programming

are these breakpoint good practice for this website?