Hello friends, after I successfully deployed my websites I needed to make adjustments to the mobile design of my intro page. It currently doesn't work at all and luckily I was able to have used this kind of structure in a project I worked on before. I'll share this with you and document for me as well.
_settings.scss
// Media widths
$mobile: 45rem; // 720px
$tablet: 75rem; // 1200px
$desktop: 90rem; // 1440px
$desktop-large: 120rem; // 1920px
$content-max-width: 1440px;
$content-inner-width: 880px;
// Media Queries
$screen: "only screen" !default;
$landscape: "(orientation: landscape)" !default;
$portrait: "(orientation: portrait)" !default;
$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{$mobile})" !default;
$medium-up: "#{$screen} and (min-width: #{$mobile})" !default;
$medium-only: "#{$screen} and (min-width: #{$mobile}) and (max-width: #{$tablet})" !default;
$large-up: "#{$screen} and (min-width: #{$tablet})" !default;
$large-only: "#{$screen} and (min-width: #{$tablet}) and (max-width: #{$desktop})" !default;
$xlarge-up: "#{$screen} and (min-width: min-width: #{$desktop})" !default;
$xlarge-only: "#{$screen} and (min-width: min-width: #{$desktop}) and (max-width: #{$desktop-large})" !default;
$xxlarge-up: "#{$screen} and (min-width: #{$desktop-large})" !default;
_mixins.scss
with the help of mixins I will apply styles to the breakpoints. I decided for my current setup that these three breakpoints are enough. Otherwise I would have gone with bootstrap or the like.
@mixin mobile {
@media #{$small-only} {
@content;
}
}
@mixin tablet {
@media #{$medium-only} {
@content;
}
}
@mixin desktop {
@media #{$large-up} {
@content;
}
}
a sample usage could then look like this. Thanks to the _settings.scss it is an easy task to extend for example the tablet-portrait breakpoint. (Try it yourself!)
display: grid;
gap: 0 100px;
grid-template-columns: repeat(3, 1fr);
@include desktop {
grid-template-rows: repeat(2, 1fr);
}
@include tablet {
grid-template-rows: repeat(1, 1fr);
}
@include tablet-portrait {
grid-template-rows: repeat(2, 1fr);
}
@include mobile {
padding: 20px;
grid-template-columns: repeat(1, 1fr);
grid-template-areas: none;
gap: 20px 0;
}