skip to Main Content

Responsive Breakpoints

Certain utility classes can be altered at different breakpoints for controlling the design responsively. The following breakpoints are available in the theme:

Breakpoint prefix Media query
sm @media (min-width: 640px)
md @media only screen and (min-width: 768px)
lg @media only screen and (min-width: 1024px)
xl @media only screen and (min-width: 1280px)

To apply a specific breakpoint to a utility class simply add the breakpoint prefix after the wpex- framework prefix so instead of wpex- it maybecome wpex-sm-. So for example to float an element to the right you would use wpex-float-right, however, if you want it to float to the right only for devices greater than 640px you would instead use wpex-sm-float-right.

Mobile First

Notice how all the media queries use min-width? This is because the CSS utility framework is a “Mobile First” framework. This means if you want to apply a class for mobile devices you will use the non-prefixed classname and to override it at larger breakpoints you will use prefixes.

Say for example you want to hide element on mobile devices. You would start by adding the wpex-hidden classname. To display this element on larger screen sizes you could then add the classname wpex-md-block to display the element starting at the 768px breakpoint.

Resize your browser to view a live example below:

Visible on xl screens (wpex-hidden wpex-xl-block)
Visible on lg screens (wpex-hidden wpex-lg-block wpex-xl-hidden)
Visible on md screens (wpex-hidden wpex-md-block wpex-lg-hidden)
Visible on sm screens ( wpex-hidden wpex-sm-block wpex-md-hidden)
Visible on mobile screens ( wpex-sm-hidden)