diff options
Diffstat (limited to 'src/css/imports/_media-queries.css')
| -rwxr-xr-x | src/css/imports/_media-queries.css | 35 |
1 files changed, 2 insertions, 33 deletions
diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css index d8a4c93..d3be559 100755 --- a/src/css/imports/_media-queries.css +++ b/src/css/imports/_media-queries.css @@ -1,36 +1,5 @@ -/* +@custom-media --breakpoint-not-small screen and (min-width: 40em); - CUSTOM MEDIA QUERIES +@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em); - Media query values can be changed to fit your own content. - There are no magic bullets when it comes to media query width values. - They should be declared in em units - and they should be set to meet - the needs of your content. You can also add additional media queries, - or remove some of the existing ones. - - These media queries can be referenced like so: - - @media (--breakpoint-not-small) { - .medium-and-larger-specific-style { - background-color: red; - } - } - - @media (--breakpoint-medium) { - .medium-screen-specific-style { - background-color: red; - } - } - - @media (--breakpoint-large) { - .large-and-larger-screen-specific-style { - background-color: red; - } - } - -*/ - -/* Media Queries */ -@custom-media --breakpoint-not-small screen and (min-width: 30em); -@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); @custom-media --breakpoint-large screen and (min-width: 60em); |
