Custom CSS

Overview

Custom CSS lets you apply a custom CSS to your theme instantly by simply pasting your custom CSS to the editor and click Save button.

To use this feature, navigate to Custom CSS tab.

If Custom CSS is disabled before, click Enable Custom CSS button to enable again:

The page after enabled look like this:

Or you can go to Settings tab and click Enable custom css button:

Apply CSS for different screen sizes

Custom global CSS

This feature lets you apply your custom CSS globally to your theme.

Custom CSS for desktops

This feature lets you apply your custom CSS to the device is desktop with screen size from 1281px to higher.

Custom CSS for laptops, desktops

This feature lets you apply your custom CSS to the device is desktop or laptop with screen size from 1025px to 1280px.

Custom css for tablets, Ipads (portrait)

This feature lets you apply your custom CSS to the device is tablet or Ipad with screen size from 768px to 1024px when using portrait orientation.

Custom css for tablets, ipads (landscape)

This feature lets you apply your custom CSS to the device is tablet or Ipad with screen size from 768px to 1024px when using landscape orientation.

Custom css for mobiles (portrait)

This feature lets you apply your custom CSS to the device is mobile with screen size from 320px to 479px when using portrait orientation.

Custom css for mobiles (landscape)

This feature lets you apply your custom CSS to the device is mobile with screen size from 320px to 479px when using landscape orientation.

Automatic validate your custom CSS

When you paste your custom CSS to editor, the editor will automatically validate your code, it will show error or warning like this:

You can hover to those errors or warnings icons to see error detail:

Video Tutorial: https://youtu.be/qEk5DgXE4Iw