CODEWITHSUNDEEP
htmlcsssassmedia-queries
DarkFenix
DarkFenix

Reputation: 746

Why @ custom-media does not apply the respective styles in sass

I am trying to make a basic layout with CSS grid and the responsive part with the new specification of CSS level 4 , but it is not working for me when compiling the content of the sass, Am I failing in something? Do I miss any detail?

custom-media.scss

*{ margin: 0 ; padding: 0}

@custom-media --phone  ( 320px < width < 480px); 
@custom-media --tablets (481px < width  < 767px);
@custom-media --ipad-landscape  (768px < width < 1024px) and (orientation: landscape);
@custom-media --ipad-normal  (768px < width < 1024px);
@custom-media --desktop  (1025px < width  < 1280px);
@custom-media --large  (width > 1281px);

app.scss

@import 'custom-media';

/**
 *
 * Login Page
 *
 */
 .container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-row: 1fr;

    .presentation{
        background:#CB3BBF;
    }

    .loginsection{

    }

    @media  (--desktop) {
        .container {
            grid-template-columns: 1fr; 
        }

        .presentation{
            background:blue;
        }
    }
}

I try to have the width between 1025px and 1280 px the blue background color and it does not work in Chrome Versión 64.0.3282.186

Upvotes: 0

Views: 998

Answers (2)

code monkey
code monkey

Reputation: 139

As of now (Dec 2021), it appears that, while in the spec, @custom-media has not been implemented anywhere yet. Neither caniuse nor MDN know about @custom-media.

Upvotes: 0

HTML CSS Hupp Technologies
HTML CSS Hupp Technologies

Reputation: 335

you can use

@mixin responsive($size) { @if $size == large { /* 1920px / @media (max-width: 120em) { @content; } } @if $size == small { / 1199px */ @media (max-width: 74.938em) { @content; } } } @include responsive(large){ font-size: 42px; } @include responsive(small){ font-size: 22px; }

this will work.

Upvotes: 1

Related Questions