X Theme Responsive Breakpoints

The default CSS media query breakpoints for X Theme with Cornerstone are: –

Small: 480px
Medium: 767px
MediumLarge: 979px
Large: 1200px

To write these as media queries you would use:-

@media (max-width: 480px)
@media (max-width: 767px)
@media (max-width: 979px)
@media (max-width: 1200px)

So if you were writing this as a media query then you would use the following format:-

@media (max-width: 480px) {
    border: 1px solid #ccc;

X Theme also uses the following media non-default queries:-

@media screen and (min-width: 783px) 
@media screen and (max-width: 782px)
@media screen and (min-width: 601px) and (max-width: 782px)
@media (min-width: 980px) and (max-width: 1199px)
@media (min-width: 1200px)

The X Theme Responsive Menu Media Query is set to kick in at:-

@media (max-width: 1200px)

We feel that’s too early and would rather see it at ‘@media (max-width: 979px)’

About the Author
X Theme Responsive Breakpoints 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

