@matbac85
Posted
It seems to me that you've done a great job! I remember doing this challenge and it was deceptively simple.
I see in your CSS code that you write your media queries at each stage, I imagine that's because you're thinking about the three screen sizes and how the elements evolve as you go along, but isn't it safer to put your media queries at the very end?
I've seen that you've liked all my challenges. Thank you for your support!
Keep up the good work!
@kaamiik
Posted
Hi. Yes It was some how challenging for me. specially for the background images and the curve section dividers. For using media query I'm using a mixin with sass and use it whenever I need. This is the mixin code.
$breakpoints-up: (
"medium": "48rem",
"large": "75rem",
"xlarge": "90rem",
);
@mixin breakpoint($size) {
@media (min-width: map-get($breakpoints-up, $size)) {
@content;
}
}
And I use it like this
.header {
padding: 0 rem(24);
padding-top: rem(40);
@include breakpoint(medium) {
padding: 0 rem(39);
padding-top: rem(62);
}
@include breakpoint(large) {
padding: 0 rem(165);
padding-top: rem(62);
}
}
After the compiling to css you see the media on each stage. I think It is more readable and easier to write for me.
Your welcome. Thank you too @matbac85
