Step-by-Step Guide: Applying Custom CSS Only Desktop in Elementor

Discover how to seamlessly apply custom CSS on desktop versions using Elementor, enhancing your website’s visual appeal and functionality. Follow our comprehensive guide to learn the tips and techniques used by professionals.

Are you new to the world of web development and want to personalize your site built with Elementor?

You have landed at the right place. In this beginner-friendly guide, we will walk you through the step-by-step process of applying a custom CSS only desktop version of Elementor, a popular website-building platform. This customization not only adds a personal touch to your site but also enhances the user experience manifold.

Apply Custom CSS only Desktop in Elementor

To apply a Elementor custom CSS only desktop in Elementor, follow these steps:

Step 1: Open your page in Elementor and select the widget where you want to apply the custom CSS.

Step 2: Go to the “Advanced” tab, and in the “Custom CSS” section, input your CSS code, prefaced with a media query to target desktop screens only, like:

Large Desktops(1281px)

/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

/* CSS for larger desktops goes here */

}

Here, any styles inside this media query will only be applied to screens that are 1281 pixels wide or wider. This is typically used for larger desktop screens.

Laptops and Small Desktops (between 1025px and 1280px)

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS for medium-sized screens goes here */
  
}

This media query targets screens between 1025 pixels and 1280 pixels wide, which typically includes many laptops and some desktop screens. The and conjunction ensures both conditions (minimum width and maximum width) are met.

Small Desktop Screens (961px to 1024px):

@media (min-width: 961px) and (max-width: 1024px) {
  /* Your custom CSS rules for smaller desktop screens go here */
}

This query aims at small desktop screens, which are slightly larger than tablet screens but not quite as wide as standard desktops, helping to fine-tune the visual layout for this specific range.

Medium-Large Desktop Screens (1281px to 1440px):

@media (min-width: 1281px) and (max-width: 1440px) {
  /* Your custom CSS rules for medium-large desktop screens go here */
}

Targeting medium to large desktop screens, this query helps to adjust styles for displays that are wider than standard desktop screens but not into the extra-large category, offering a balanced layout for this screen range.

Extra Large Desktop Screens (1441px to 1920px):

@media (min-width: 1441px) and (max-width: 1920px) {
  /* Your custom CSS rules for extra-large desktop screens go here */
}

This media query is for extra-large desktop screens, such as high-resolution monitors, where there is an ample amount of screen real estate to work with, allowing for expansive layouts and more detailed designs.

Step 3: Click “Update” to save your changes and preview the desktop view to ensure the CSS is applied correctly.

Conclusion

As we conclude our beginner-friendly guide to applying custom CSS exclusively on the desktop version using Elementor Pro, we hope you found the steps easy to follow and implement. The journey from installation to navigating the advanced settings doesn’t have to be complicated. Our step-by-step approach aims to ease your pathway into the world of website customization.

Click Here: How to Upload SVG In Elementor?

Mastering desktop CSS Elementor tasks opens up a realm of opportunities to enhance your website’s aesthetics and functionality. Feel free to revisit this guide as you progress in your Elementor journey, and don’t hesitate to experiment with different CSS codes to give your desktop version a unique and personalized touch. Happy customizing!