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:
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:
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.
// 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.@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.
@mobileBreakpoint : 320px;
@tabletBreakpoint : 768px;
@computerBreakpoint : 992px;
@largeMonitorBreakpoint : 1200px;
@widescreenMonitorBreakpoint : 1920px;@largestMobileScreen : (@tabletBreakpoint - 1px);
@largestTabletScreen : (@computerBreakpoint - 1px);
@largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);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:
In normal context you can use static pixel values that match the Semantic UI breakpoints.
@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).
*/
}