Administrators & Analysts

When creating custom CSS overrides for a web assistant or a Site, you may want to have different rules for desktop and mobile browsers.

It is difficult to know for sure what device a user is viewing your site on, so Mavenoid keys off of the width of the browser window. If the window is wider than 820 pixels, the desktop view is shown; if it is 820 pixels or less the mobile view is shown.

You can therefore use media queries in your custom CSS to follow this same breakpoint and apply different styles based on which view is being shown.

For example, if you want h2 elements to have red text in desktop view and blue text in mobile view, you could write the following CSS:

h2 {
  color: red;
}

@media only screen and (max-width: 820px) {
  h2 {
    color: blue;
  }
}

The "red" rule applies by default, but in browser windows that are 820 pixels wide or narrower, the "blue" rule will override it.