Responsive CSS

When adding custom CSS to the theme it’s often needed that it’s responsive. This can be done with media queries.

In Chap theme there are 2 different contexts where you can insert CSS:

Semantic UI context

Additional CSS (LESS) can be added to Semantic UI context from Chap Theme -> SUI tab. The code editor there is separated into multiple components and you have 2 sections for each component:

Variables section
For overriding Semantic UI variables before they are used.
Overrides section
For overriding any CSS after it has been declared.

There are also “read-only” sections so you can take a look at what’s going on under the hood.

The responsive CSS belongs to the overrides section and can take advantage of the Semantic UI breakpoint variables.

LESS
Media queries helper mixins
// Helper mixins are provided for media queries when using the SUI editor:
@media @mobile {
	/**
	 * Mobile.
	 */
}
// The above is equivalent to:
@media only screen and (max-width: @largestMobileScreen) {
	/**
	 * Mobile.
	 */
}

// All available mixins:
@mobile       // (<768px)  Mobile (this is generally sufficient, "lg", "md" and "sm" should be used for fine-tuning).
@mobileLg     // (<=480px) Large mobile (most mobiles but excluding landscape).
@mobileMd     // (<425px)  Medium mobile (typically 375px wide).
@mobileSm     // (<375px)  Small mobile (typically 320px wide).
@tablet       // (<992px)  Tablet.
@sm           // (<1200px) Small screen.
@lg           // (<1920px) Large screen.
@xl           // (>1920px) Widescreen.
@gtMobile     // (768px+)  Larger than mobile.
@gtTablet     // (992px+)  Larger than tablet.
@gtSm         // (1200px+) Larger than small screen.
@gtLg         // (1920px+) Larger than large monitor.
@mobileMenu   // (<992px)  When mobile menu kicks in.
@mobileLayout // (<768px)  When mobile layout kicks in.
@wcSm         // (<768px)  WooCommerce small screen.
LESS
Media queries in Semantic UI context
@media only screen and (max-width: @largestMobileScreen) {
	/**
	 * Mobile.
	 */
}
@media only screen and (min-width: @largestMobileScreen + 1) and (max-width: @largestTabletScreen) {
	/**
	 * Tablet.
	 */
}
@media only screen and (min-width: @largestTabletScreen + 1) and (max-width: @largestSmallMonitor) {
	/**
	 * Small screen.
	 */
}
@media only screen and (min-width: @largestSmallMonitor + 1) {
	/**
	 * Large screen.
	 */
}

@media only screen and (min-width: @largestMobileScreen + 1px) {
	/**
	 * Not mobile.
	 */
}
@media only screen and (max-width: @chapMobileMenuBreakpoint) {
	/**
	 * When mobile menu kicks in (main and sticky menu items are 
	 * hidden and a link to open the mobile menu is shown).
	 */
}
@media only screen and (max-width: @chapMobileLayoutBreakpoint) {
	/**
	 * When mobile layout kicks in (header elements such as brand, 
	 * widgets and menu are displayed on top of each other instead 
	 * of side by side; sidebars are moved below main content).
	 */
}

The variables for breakpoints are defined in the default/globals/site.variables section in the Chap Theme -> SUI editor. If needed, you can override them to use custom values in the globals/site.variables section.

LESS
Default Semantic UI breakpoints
@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1200px;
@widescreenMonitorBreakpoint : 1920px;
LESS
How screen sizes are calculated
@largestMobileScreen : (@tabletBreakpoint - 1px);
@largestTabletScreen : (@computerBreakpoint - 1px);
@largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);
Normal context

The normal CSS context can not use Semantic UI variables but also doesn’t need to be recompiled after making changes. Normal context applies to CSS inputs such as:

Theme option
Chap Theme -> Code -> Global CSS/Sass textarea
Metabox
Custom CSS/Sass metaboxes can be enabled for specified post types under Chap Theme -> Code
Child theme
Stylesheet: /wp-content/themes/chap-child/style.css
Customizer
WordPress allows to add custom CSS under Appearance -> Customize -> Additional CSS

In normal context you can use static pixel values that match the Semantic UI breakpoints.

SCSS
Media queries in normal context
@media only screen and (max-width: 767px) {
	/**
	 * Mobile.
	 */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	/**
	 * Tablet.
	 */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	/**
	 * Small screen.
	 */
}
@media only screen and (min-width: 1200px) {
	/**
	 * Large screen.
	 */
}

@media only screen and (min-width: 768px) {
	/**
	 * Not mobile.
	 */
}
@media only screen and (max-width: 991px) {
	/**
	 * When mobile menu kicks in (main and sticky menu items are 
	 * hidden and a link to open the mobile menu is shown instead).
	 */
}
@media only screen and (max-width: 767px) {
	/**
	 * When mobile layout kicks in (header elements such as brand, 
	 * widgets and menu are displayed on top of each other instead 
	 * of side by side; sidebars are moved below the main content).
	 */
}
There are also helper CSS classes that can be used to change element’s visibility based on media queries.