Use the new Support theme

In November 2022, we released a partial new theme for all new-from-scratch knowledge bases.
This theme is built on top of the Minimalist theme and uses the Left 2 columns layout, and it works best with that combination. You may need to adjust CSS if you are using other themes or layouts.
The CSS and HTML tweaks for this theme are automatically added to all knowledge bases created from scratch. If you'd like to try the theme out in an existing knowledge base, you'll need:
Custom CSS: The full Custom CSS we use to modify the Minimalist theme is included below.
The back-to-top snippet: if you copy the full Custom CSS from below, you can ignore the CSS portion of the instructions.
Custom HTML tweaks: You'll need to make a couple small tweaks to your Custom HTML, and either to your Custom HTML or Knowledge Base > Home Page depending on where your homepage HTML lives.
More detailed instructions:
If you'd like the back-to-top behavior, follow the instructions to Display a back to top icon when scrolling. You can skip steps 16 & 17, since the Custom CSS is included further below.
Go to Settings > Style.
Below the preview pane, be sure Custom HTML is selected.
In the Custom HTML dropdown, select Home Page.
Look through your Custom HTML for your home page.
- If the HTML there includes [template("base-cats")], replace it with the icon-cats merge code instead. See Add category icons to your homepage category panels for full details.
- If the HTML there does not include [template("base-cats")], go to Knowledge Base > Home Page and replace the base-cats template merge code there with the icon-cats merge code. See Add category icons to your homepage category panels for full details. Then come back here to Settings > Style!
In the Custom HTML dropdown, select Body.
Update the top div here to add the slideout-new class:
Optional: In the Custom HTML dropdown, select Article. If this template has the article actions as raw HTML, as seen in the screenshot below, replace that HTML with the article action_icons merge code.
This is not required but it can help you clean up the code here a little. See Update your article actions merge code for full details.
Select Custom CSS.
Copy the CSS below and paste it into your Custom CSS pane. Once you're done, be sure to Save your changes.
/******************************************************** General structure ****************************/
/* smooth article resizing on TOC open/close */ 
.hg-minimalist-theme #ko-article-cntr {
  transition: all 300ms ease-in-out;
  width: 100%;
}
/* hide right col when TOC open */
.hg-minimalist-theme #ko-article-cntr.slideout-panel-left.open+.col-lg-3.visible-lg.right-column {
  opacity: 0;
  visibility: hidden;
}
/* size and position right column if in use */
.hg-minimalist-theme.hg-3column-layout .right-column {
  top: 65px;
  padding-right: 35px;
  z-index: 2;
  max-width: calc((100vw - 920px) / 2);
  transition: all 200ms ease-in-out;
  opacity: 1;
}
/* make sure footer is full width */
.hg-minimalist-theme.hg-3column-layout .ko-site-footer {
  width: 100%;
}
/* self clear page contents */
.documentation-body::after {
  content: "";
  display: table;
}
/* make site background white */
.hg-minimalist-theme .documentation-body {
  background: #ffffff;
}
.hg-site {
  background: #ffffff;
}

/******************************************************** Font overrides *************************/
/* color for h1 */
.hg-minimalist-theme .documentation-article h1 {
  color: #1d284f;
}
/* article content h2 size */
.documentation-article h2 {
  font-size: 28px;
}
/* article content h3 size */
.documentation-article h3 {
  font-size: 24px;
}
/* article content h4 size */
.documentation-article h4 {
  font-size: 18px;
}
/* default color of a text (links) */
.hg-minimalist-theme a:not(.btn),
a:not(.btn) {
  color: #3C80BA;
}
/* remove bottom margin from paragraphs in article content */
.documentation-article p {
  margin-bottom: 0;
}
/* force default font size for blockquote */
blockquote {
  font-size: inherit;
}
/* override default font size for home page search bar */
.hg-minimalist-theme .ko-large-search input.form-control {
  font-size: 15px;
}

/******************************************************** Topic Category styles **********************/
/* remove top border, bottom margin from title container */
.hg-minimalist-theme .topics-top-wrapper {
  border-bottom: none;
  margin-bottom: 0px;
}
/* remove border, add padding for topic articles */
.hg-minimalist-theme .topics-articles .hg-article-body,
.hg-minimalist-theme .hg-category-page .hg-article-body {
  border-bottom: none;
  padding-bottom: 40px;
}
/* remove padding between topic articles */
.hg-minimalist-theme .topics-articles .hg-article-body {
  padding-bottom: 0px;
}
/* topic aricle h2 size */
.documentation-article .topics-articles h2.hg-article-title {
  font-size: 24px;
}
/* topic aricle h3 size */
.documentation-article .topics-articles h3 {
  font-size: 18px;
}
/* topic aricle h4 size */
.documentation-article .topics-articles h4 {
  font-size: 16px;
}

/******************************************************** Default Category Styles *********************/
/* add top and bottom margin to category panels */
.hg-minimalist-theme .category-list {
  margin-bottom: 40px;
  margin-top: 40px;
}
/* remove bottom border from title */
.hg-minimalist-theme .faq-header {
  border-bottom: none;
}
/* remove right margin from category description */
.hg-minimalist-theme .faq-top-description {
  margin-right: 0;
}
/* change category panels into 2x2 grid */
.hg-minimalist-theme .faq-nav-content .category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  grid-auto-rows: 1fr;
}
/* get rid of psuedo html elements */
.hg-minimalist-theme .faq-nav-content .category-list .clear-left,
.hg-minimalist-theme .faq-nav-content .category-list .clear-both {
  display: none !important;
}
/* style category panels */
.hg-minimalist-theme .faq-nav-content .faq-cat-container {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  transition: all .2s ease-in-out;
  backface-visibility: hidden;
}
/* hover effect for category panels */
.hg-minimalist-theme .faq-nav-content .faq-cat-container:hover {
  background-color: #fff;
  box-shadow: 2px 4px 4px #aeaeae;
  transform: scale(1.01) translateZ(0);
}
/* add bottom margin to list of articles */
.hg-minimalist-theme .faq-nav-content {
  margin-bottom: 40px;
}
/* remove right margin from category title */
.hg-minimalist-theme .faq-header {
  margin-right: 0;
}
/* hide h2 Articles from default categories */
.hg-minimalist-theme .faq-nav-content h2 {
  display: none;
}
/* Force main area to be full width */
.hg-minimalist-theme .hg-category-page .category-list .col-md-6.col-lg-4 {
  width: 100% !important;
}
/* adjust position of subscribe button */
.hg-minimalist-theme .ko-cat-sub-cntr {
  margin-top: 12px;
  margin-right: 0;
}
/* apply hover effects to subscribe button */
.hg-minimalist-theme .btn.btn-default.ko-cat-sub {
  border: 1px solid #b3b3b3;
  transition: all .1s ease-in-out;
  backface-visibility: hidden;
}
.hg-minimalist-theme .btn.btn-default.ko-cat-sub:hover {
  box-shadow: 1px 2px 2px #aeaeae;
  transform: scale(1.01) translateZ(0);
}
/* subcategory panel display tweaks */
.hg-minimalist-theme .faq-nav-content .faq-cat-panel-container {
  padding: 0;
}
.hg-minimalist-theme .faq-nav-content .faq-cat-panel {
  border: none;
  box-shadow: none;
  border-radius: 4px;
}
/* subcategory content-list display tweaks */
.hg-minimalist-theme .category-list.faq-content-list {
  margin-bottom: 0;
}
.hg-minimalist-theme .faq-content-list-container {
  width: auto;
  padding: 0;
}
.hg-minimalist-theme .faq-content-list-container .category-header {
  border-bottom: none;
  margin-bottom: 10px;
}
.hg-minimalist-theme .faq-nav-content .article-block div {
  margin-left: 0;
}

/******************************************************** Table of Contents ***********/
/* add border and box-shadow to TOC */
.hg-minimalist-theme.hg-2column-layout .slideout-menu {
  display: block;
  padding: 0;
  box-shadow: none;
  border: 1px solid #ddd;
  border-radius: 0 4px 0 0;
  background-color: #F8F4F1;
  left: -360px;
  transition: all 300ms ease-in-out;
}
/* remove TOC padding */
.hg-minimalist-theme .hg-site-body .documentation-outter-list {
  padding: 0;
}
/* style top level content */
.hg-minimalist-theme .documentation-categories li.level-0,
.hg-minimalist-theme .documentation-outter-list > .article-container {
  border-bottom: 0;
  padding: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
/* style child content containers */
.hg-minimalist-theme .documentation-categories li {
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.hg-minimalist-theme .documentation-categories li.level-0 > .category-link-container,
.hg-minimalist-theme .documentation-outter-list > .article-container {
  padding: 5px 10px;
}
/* style top level articles */
.hg-minimalist-theme .documentation-outter-list > .article-container .article-link {
  padding: 0 5px;
  line-height: 33px;
}
/* background color for active and hovered child content */
.hg-minimalist-theme .documentation-categories li.active,
.hg-minimalist-theme .category-link-container.active,
.hg-minimalist-theme .documentation-categories .article-container:hover,
.hg-minimalist-theme .documentation-categories li a:hover,
.hg-minimalist-theme .category-link-container:hover {
  background-color: #e8e8e8;
}
/* background color for active and hovered top level content */
.hg-minimalist-theme .level-0 > .category-link-container:hover,
.hg-minimalist-theme .level-0 > .category-link-container.active,
.hg-minimalist-theme .documentation-outter-list > .article-container:hover,
.hg-minimalist-theme .documentation-outter-list > .article-container.active,
.hg-minimalist-theme .documentation-outter-list > .article-container .article-link:hover,
.hg-minimalist-theme .documentation-outter-list > .article-container .article-link.active {
  background-color: #f2e9e3;
  border-radius: 0;
}
.hg-minimalist-theme .documentation-categories .level-0 > .category-link-container a:hover {
  background-color: #f2e9e3;
}
/* override default toc slideout behavior */
.hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
  transform: translateX(360px);
  width: calc(100% - 360px);
}
/* Change TOC chevron-right to plus-square */
.hg-minimalist-theme .documentation-categories .fa-chevron-right:before {
  content: "\f0fe" !important;
}
/* Change TOC chevron-down to minus-square */
.hg-minimalist-theme .documentation-categories .fa-chevron-down:before {
  content: "\f146" !important;
}
/* make icons slightly larger */
.hg-minimalist-theme .cat-icon, .hg-minimalist-theme .home-icon, .hg-minimalist-theme .alt-icon {
  padding: 8px 0 0 6px;
  font-size: 18px;
}
/* override default box shadow when side TOC is open */
.hg-minimalist-theme .documentation-categories.slideout-menu.open {
  box-shadow: 2px 4px 4px #aeaeae;
  left: 0;
}

/********************************************************* Modals ********************/
/* adjust input border width in modals */
.hg-minimalist-theme .modal .form-control {
  border-width: 1px;
}

/********************************************************* PDF Adjustments ***********/
/* hide .pdf-header outside of actual PDFs */
.hg-minimalist-theme .pdf-header {
  display: none;
}
/* show .pdf-header in actual PDFs */
.hg-minimalist-theme .hg-pdf .pdf-header {
  display: block;
}
/* height of image in .pdf-header */
.hg-minimalist-theme .hg-pdf .pdf-header img {
  height: 80px;
}

/******************************************************** Home Page Top and General */
/* get rid of background banner and add some padding to top of home page */
.hg-minimalist-theme .ko-homepage-top {
  background: none;
  padding-top: 2em;
  padding-bottom: 0em;
}
/* make sure category title is clickable */
.hg-minimalist-theme .hg-home-page .category-header {
  z-index: 2;
}
/* change default color for home page title */
.hg-minimalist-theme .ko-homepage-top .hg-article-title {
  color: #1d284f;
}

/******************************************************** Content Lists */
/* tweak padding and line heights */
.hg-minimalist-theme .stat-list {
  line-height: 1.3;
  font-size: 14px;
  margin-left: 1px;
}
.hg-minimalist-theme .stat-list li {
  padding: 4px 0;
}
/* remove bottom border from page title */
.hg-minimalist-theme .page-header {
  border-bottom: none;
}
/* remove border above "see more..." */
.hg-minimalist-theme .list-action {
  border-top: none;
}
/* correct margin and padding for content lists on homepage */
.hg-minimalist-theme .homepage-widgets {
  margin: 2em -15px;
}
.hg-minimalist-theme .homepage-widgets .col-md-4.col-sm-6 {
  padding-left: 15px;
}

/******************************************************** Search Bar */
/* remove border from individual search bar elements */
.hg-minimalist-theme .hg-search-bar input.form-control,
.hg-minimalist-theme .input-group-btn .btn,
.hg-minimalist-theme .input-group-btn .btn:hover,
.hg-minimalist-theme .hg-search-bar input.form-control:focus,
.hg-minimalist-theme .input-group-btn .btn:focus,
.hg-minimalist-theme .input-group-btn .btn-default.dropdown-toggle:active,
.hg-minimalist-theme .input-group-btn .btn-default.dropdown-toggle:focus {
  border: none;
}
/* add border to outer search bar */
.hg-minimalist-theme .hg-search-bar .input-group {
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  transition: border .25s linear,color .25s linear,background-color .25s linear;
}
/* change border color on focus/active */
.hg-minimalist-theme .hg-search-bar .input-group:active,
.hg-minimalist-theme .hg-search-bar .input-group:focus,
.hg-minimalist-theme .hg-search-bar .input-group:focus-within {
  border: 1px solid #f8b88b;
}
/* remove background color from search button */
.hg-minimalist-theme .input-group-btn .btn {
  background: none;
}
/* adjust color and sizing for the refine button */
.hg-minimalist-theme .input-group-btn .btn-default.dropdown-toggle {
  color: #1d284f;
  font-size: 16px;
  border: none;
}
/* restyle the dropdown caret */
.hg-search-bar .category-dropdown .dropdown-toggle .caret {
  border: none;
  display: inline;
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  font-size: 14px;
}
.hg-search-bar .category-dropdown .dropdown-toggle .caret::before {
  content: "\f0d7";
}
/* change font color and remove border for search button */
.hg-minimalist-theme span.input-group-btn .btn-default,
.hg-minimalist-theme span.input-group-btn .btn-default:hover {
  color: #E6E6E6;
  border-left: none;
}
.hg-minimalist-theme .ko-large-search input.form-control,
.hg-minimalist-theme .hg-search-bar input.form-control {
  border-right: none;
}
/* add box-shadow to search bar */
.hg-minimalist-theme .input-group {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
}
/* remove box shadow from type-ahead suggestion box */
.hg-minimalist-theme .navbar-collapse.in .input-group,
.hg-minimalist-theme .navbar-collapse.collapsing .input-group {
  box-shadow: none;
}
/* handle styles for showing/hiding type-ahead suggestion box */
.hg-minimalist-theme #navbar-collapse.in,
.hg-minimalist-theme #navbar-collapse.collapsing {
  margin-bottom: 0;
  padding: 10px;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 10px 20px -8px #ccc;
}

/******************************************************** Search Pages */
/* adjust bottom spacing page titles and containers */
.hg-minimalist-theme .recommended-container h2,
.hg-minimalist-theme .hg-contact-form-container h2,
.hg-minimalist-theme .hg-article-search {
  margin-bottom: 40px;
}
/* add bottom margin to search controls */
.hg-minimalist-theme .ko-srch-meta-cntr {
  margin-bottom: 20px;
}
/* add more top margin to full search results */
.hg-minimalist-theme #homepage-search-form .hg-article-search {
  margin-top: 20px;
}
/* remove bottom spacing from recommended article titles */
.hg-minimalist-theme .hg-article-search h4 {
  margin-bottom: 0;
}
/* increase space between article results */
.hg-minimalist-theme .hg-article-search li {
  margin-bottom: 25px;
}
/* adjust size/spacing of article meta data */
.hg-minimalist-theme .hg-article-info {
  font-size: 12px;
  margin-bottom: 5px;
}
/* add spacing after article blurbs */
.hg-minimalist-theme .hg-article-blurb {
  margin-bottom: 25px;
}
/* make last modified text for recommended articles smaller */
.hg-minimalist-theme .hg-article-search .hg-date {
  font-size: 14px;
}
/* adjust font size and line height for contact form labels */
.hg-minimalist-theme .hg-contact-form-container label {
  font-size: 18px;
  line-height: 1.3;
}
/* decrease width of contact form field borders */
.hg-minimalist-theme .hg-contact-form-container .form-control {
  border: 1px solid #bdc3c7;
}
/* update colors for the results paging buttons */
.hg-minimalist-theme .ko-search-pager li.current {
  background: #1d284f;
}
.hg-minimalist-theme div.ko-search-pager .pull-left:not(.current) a:not(.btn) {
  color: #1d284f;
}
.hg-minimalist-theme div.ko-search-pager .pull-left:not(.current) a:not(.btn):hover {
  color: #f8b88b;
}

/******************************************************** Tables ***************************************/
/* adjust table header cell styles */
.table-bordered > thead > tr > th {
  background-color: #1d284f;
  color: #ffffff;
  padding-left: 1em;
}
/* give left aligned cells some left padding */
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td,
table.table-bordered tr td[style*="text-align: left"] {
  padding-left: 1em;
}

/******************************************************** Article HTML ***************************************/
/* add some padding to line items */
.hg-article-body ol li {
  padding: 10px 0;
}
/* first level - use regular numeric decimals  */
.hg-article-body ol {
  list-style-type: decimal;
}
/* second level - use lowercase alphabetic */
.hg-article-body ol > li > ol {
  list-style-type: lower-alpha;
}
/* third level - use lowercase Roman numerals */
.hg-article-body ol > li > ol > li > ol {
  list-style-type: lower-roman;
}
/* optional .article-block styles */
.article-block div {
  margin-left: 20px;
  font-size: 15px;
  line-height: 1.2;
}
/* default margin for p in lists */
.hg-article-body ul p,
.hg-article-body ol p {
  margin: 20px 0 0;
}
/* give more top space to article ratings */
.hg-minimalist-theme .hg-ratings {
  margin-top: 15px;
}
/* space out the article rating thumbs */
.hg-minimalist-theme .hg-ratings .hg-helpful {
  margin-right: 20px;
}
/* styles for check-list bullet points */
ul.check-list {
  list-style: none;
  padding-left: 0;
}
ul.check-list li {
  position: relative;
  padding-left: 1.5em;
}
ul.check-list li:before {
  font-family: 'FontAwesome';
  content: "\f00c" !important;
  padding-right: 0.5em;
  font-size: smaller;
  color: green;
}
/* remove top border from comment form */
.hg-minimalist-theme #hg-comment-form {
  border-top: none;
}

/******************************************************** List pages ************/
/* remove top border from glossary page */
.hg-minimalist-theme .glossary-letter ~ .glossary-letter {
  border-top: none;
}
/* left align article lists */
.hg-minimalist-theme .hg-widget-page .ko-content-cntr ol {
  padding-inline-start: 20px;
}

/******************************************************** Alert boxes ***********/
/* give alerts, wells, pre some top margin */
.alert, .well, pre {
  margin-top: 20px;
}
/* icon styling for all alerts */
.alert::before {
  display: block;
  width: 65px;
  height: 60px;
  float: left;
  margin-top: 0px;
  font-size: 48px;
  font-weight: 900;
  font-family: 'Font Awesome 6 Pro';
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  line-height: 60px;
  text-rendering: auto;
}
/* danger alert styling */
.alert.alert-danger {
  background: #F4E2E2;
  border: 1px solid #E6ADA9;
}
.alert.alert-danger:before {
  content: "\f071";
  color: #f8918b;
}
/* info alert styling */
.alert.alert-info {
  background: #F0F7FD;
  border: 1px solid #69B2F0;
}
.alert.alert-info:before {
  content: "\f05a";
  color: #97c4ed;
}
/* success alert styling */
.alert.alert-success {
  background: #F8FBF9;
  border: 1px solid #BDDCBC;
}
.alert.alert-success:before {
  content: "\f058";
  color: #9bdbae;
}
/* warning alert styling */
.alert.alert-warning {
  background: #FDF9E6;
  border: 1px solid #FBD9A4;
}
.alert.alert-warning:before {
  content: "\f8fa";
  color: #ffcc7a;
}
/* remove top margin from p tags in alerts */
.alert.alert-info p,
.alert.alert-success p,
.alert.alert-warning p,
.well p {
  margin-top: 0;
}
/* make sure there is vertical room icons in alerts */
.alert.alert-info,
.alert.alert-success,
.alert.alert-danger,
.alert.alert-warning {
  min-height: 90px;
}
/* Offset lists that are within alert divs */
.alert ul,
.alert ol {
  margin-left: 75px;
}

/******************************************************************************* Image Captions *****/
/* Set dark background for captions */
.hg-minimalist-theme .documentation-article .fr-img-caption .fr-img-wrap>span {
  background: #1d284f;
}
/* Remove border for image captions */
.hg-minimalist-theme .documentation-article span.fr-img-caption {
  border: none;
}
/* Fix hyperlinks in image captions, now that we have the dark background */
.hg-minimalist-theme span.fr-inner a {
  color: #F6A267;
  text-decoration: none;
}
/* Image caption hyperlinks should be a different color and underlined on-hover */
.hg-minimalist-theme .fr-inner a:hover {
  color: #F8B88B;
  text-decoration: underline;
}

/********************************************* Back to top snippet styling */
/* basic styles */
.back-to-top {
  background-color: #fff;
  margin: 0;
  position: fixed;
  bottom: 100px;
  right: 45px;
  width: 55px;
  height: 45px;
  z-index: 100;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #acacac;
  box-shadow: 1px 3px 3px #aeaeae;
  visibility: hidden;
  opacity: 0;
  transition: all .2s ease-in-out;
}
/* make visible when scrolled down on page */
.back-to-top.visible {
  visibility: visible;
  opacity: 1;
}
/* icon styles */
.back-to-top i {
  font-size: 45px;
  color: #3a3a3a;
}
/* mouse effect styles */
.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus {
  color: #ffffff;
}

/********************************************* Miscellaneous */
/* optional .margin-top-20 class */
.hg-minimalist-theme .margin-top-20 {
  margin-top: 20px;
}
/* panels within the right column */
.hg-minimalist-theme .right-col-panel {
  border-radius: 4px;
}
.hg-minimalist-theme .right-col-panel .panel-heading {
  color: #fff;
  background: #1d284f;
  border-radius: 4px 4px 0 0;
}
/* Add styles for in article TOC snippet to work*/
.hg-minimalist-theme .toc-top {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  margin-bottom: 20px;
  min-height: 20px;
  padding: 5px 30px;
}
/* In article TOC snippet style */
.hg-minimalist-theme .toc-anchor {
  display: block;
  height: 140px;
  margin-top: -140px;
  visibility: hidden;
}
/* remove bottom border for articles */
.hg-minimalist-theme .hg-article-body {
  border-bottom: none;
}
.ko-content-cntr .pager {
  margin-top: 40px;
} 

/********************************************************************* 404 page ***********************/
/* remove top border */
.hg-minimalist-theme .error-page-top {
  border: none;
}

/********************************************************************* No access page *****************/
/* vertically center h4 */
.hg-site-login .alert h4 {
  margin-top: 10px;
}
/* remove duplicate icon */
.hg-site-login .alert h4 i {
  display: none;
}

/********************************************************************* Screen size specific adjustments ***************/
/* will apply to screen widths narrower than 1474px */
@media (max-width: 1473px) {
  /* shrink main content area */
  .hg-minimalist-theme.hg-3column-layout:not(.hg-home-page) .ko-content-cntr {
    max-width: 700px;
  }
  /* expand right col size */
  .hg-minimalist-theme.hg-3column-layout .right-column {
    max-width: calc((100vw - 720px) / 2);
  }
}
/* will apply to screen widths narrower than 992px */
@media (max-width: 991px) {
  .hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
    width: 100%;
  }
}
/* will apply to screen widths wider than 575px, not narrower */
@media (min-width: 576px) {
  .hg-minimalist-theme .hg-home-page .category-list>div {
    width: 50%;
    float: left;
  }
  .hg-minimalist-theme .category-img {
    max-width: 50%;
  }
}
/* will apply to screen widths wider than 767px */
@media(min-width:768px) {
  .hg-minimalist-theme .lead,
  .hg-minimalist-theme .lead p {
    font-size: 30.01px !important
  }
}
/* will apply to screen widths wider than 991px */
@media (min-width: 992px) {
  .hg-minimalist-theme .hg-home-page .category-list>div {
    width: 25%;
  }
  .hg-minimalist-theme .category-img {
    max-width: 50%;
  }
}
Related Articles
