Elementor Custom CSS for Mobile - CSS

Introduction

Are you looking to customize the appearance of your website built with Elementor on mobile devices? Elementor provides a powerful tool to add custom CSS without having to leave the editor.

In this guide, we'll take a closer look at Elementor's custom CSS options for mobile devices, and provide some examples of how to use them to achieve different effects.

Custom CSS for Mobile Devices

Elementor provides two types of custom CSS options for mobile devices:

• Media Query - This option allows you to add custom CSS that only applies on mobile devices, using media query rules.
• Custom Code - This option allows you to add custom CSS to your entire website, but with the ability to filter it to only apply on mobile devices.

Media Query

To use the Media Query option, follow these steps:

1. Open Elementor's panel and select the Advanced tab.
2. Click on the Custom CSS option.
3. In the Custom CSS panel, click on the Media Query tab.
4. Add your custom CSS inside the curly braces {}.

Here's an example of how to use a media query to customize the font size on mobile devices:

@media only screen and (max-width: 480px) {
    body {
        font-size: 16px;
    }
}

Custom Code

To use the Custom Code option, follow these steps:

1. Open Elementor's panel and select the Advanced tab.
2. Click on the Custom CSS option.
3. In the Custom CSS panel, click on the Custom Code tab.
4. Add your custom CSS inside the curly braces {}.
5. Select the Mobile option from the Apply On dropdown menu.

Here's an example of how to use the Custom Code option to hide a section on mobile devices:

@media only screen and (max-width: 480px) {
    #my-section {
        display: none;
    }
}

Conclusion

Elementor's custom CSS options offer a simple yet powerful way to customize your website's appearance on mobile devices. By using media queries and custom code, you can achieve a wide range of effects to make your website stand out from the crowd.

Whether you're looking to adjust font sizes or hide entire sections, Elementor's custom CSS options give you the tools you need to get the job done.