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.

Media queries in Semantic UI context
LESS
@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.
   */
}

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.

Default Semantic UI breakpoints
LESS
@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1200px;
@widescreenMonitorBreakpoint : 1920px;
How screen sizes are calculated
LESS
@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.

Media queries in normal context
SCSS
@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.
   */
}
There are also helper CSS classes that can be used to change element’s visibility based on media queries.

Leave a comment

Your email address will not be published. Required fields are marked *