Cfrgtkky

I've media queries to extend

@media (min-width: 576px)

.modal-dialog {

max-width: 500px;

margin: 14% auto;    

}

I wanna extend the media query I goolged found nothing close.I know the following is wrong

 @media (min-width: 576px)

   .modal-dialog

  {

    @extend @media (min-width: 576px)

       .modal-dialog{

        max-width:800px

       }

  }

i have no idea about this approcah can anyoe lemme know about this.

Any help is appreicated

Updated code

 @mixin modal-dialog-mixin() {

max-width: 800px;  

 }



 @media ( min-width : 576px ){

@extend .modal-dialog;    //error here

@include modal-dialog-mixin();

 }

doesnt work its thrown at @extend .modal-dialog;

The answer we are looking for is a @mixin. With a @mixin we can import all the rules that we want very easily. What we would have to do is to put the code from the class we want to extend inside of a @mixin instead of inside the class itself. Then both the class and the section inside the media query will import the @mixin functionality.

@mixin modal-dialog-mixin() {

   max-width: 500px;

   margin: 14% auto;   

   }





 @media (max-width: 576px) {

   button {

     @include modal-dialog-mixin();

   }

 }

you can also look in to this link for more info.