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
Rägnar O'ock16mo 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
Kevin Powell16mo 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.
redtypoOooOo
redtypoOooOo16mo 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
Kevin Powell16mo 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 🙂
redtypoOooOo
redtypoOooOo16mo 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!
Want results from more Discord servers?
Add your server