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:
Supported utilities
The following utilities have responsive support.