how to use the media queries in mendix

0
hi team , how i can use the media queries in mendix for different screen resolutions . and how i can create custom media query . i have make mediaquery.scss and also import in main.scss but media query is not reflect while i apply on atlas defalut layout on topbar .   thanks
asked
1 answers
1

Simply said you need to add @media to your scss file and define the screen size. Then within the scope of the media query you can create/override classes or apply styling directly.

 

FYI: Mendix provides different screen sizes out of the box which you can use:

//== Media queries breakpoints
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

$screen-xs: 480px !default;
$screen-sm: 576px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;

// So media queries don't overlap when required, provide a maximum (used for max-width)
$screen-xs-max: calc(#{$screen-sm} - 1px) !default;
$screen-sm-max: calc(#{$screen-md} - 1px) !default;
$screen-md-max: calc(#{$screen-lg} - 1px) !default;
$screen-lg-max: calc(#{$screen-xl} - 1px) !default;

 

below you can find an example:

@mixin layout-atlas-responsive() {


// Topbar variant
    .layout-atlas-responsive-topbar {
        .region-topbar {
            padding: 0 $spacing-medium;
            @media (max-width: $screen-sm-max) {
                padding: 0 $spacing-small;
            }
        }
    }
}

 

You can refer to the docs for more information. Hope that answered your question

answered