X Theme Responsive Breakpoints

Glenn Blog Leave a Comment

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) {
    input[type="radio"], input[type="checkbox"] {
    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 (min-width: 481px) and (max-width: 767px)
@media screen and (min-width: 601px) and (max-width: 782px)
@media (min-width: 768px) and (max-width: 979px)
@media (min-width: 980px) and (max-width: 1199px)
@media (min-width: 1200px)
@media screen and (-ms-high-contrast: active),  (-ms-high-contrast: none)

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

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.