Screen widths and their corresponding variables

As per coding standard we are using some of the standard screen widths in media queries for phone, tablet, desktop, wide desktop like 480px, 767px, 768px,992px, 991px,1200px,1199px
But we are not allowed to use them directly as values, should use them as variables already created in files
These can be find in Themes file by navigating to – Themes > Modules > twitter-bootstrap-sass > _variables.scss


The corresponding sizes for screen width can be used as below
$screen-xs-min = 480px

$screen-xs-max = 767px

$screen-sm-min = 768px

$screen-sm-max = 991px

$screen-md-min = 992px

$screen-md-max = 1199px

$screen-lg-min = 1200px

Leave a comment

Your email address will not be published. Required fields are marked *