Today, responsive web design has become crucial to creating a visually appealing and user-friendly website. With the increasing popularity of mobile devices, optimizing your website for various screen sizes is essential. Elementor, a widely-used page builder for WordPress, offers powerful customization options, including the ability to apply custom CSS. However, there are instances when you may want to target specific styles exclusively for desktop users.
This tutorial will guide you through applying custom CSS exclusively for desktop users in Elementor. We will explore utilizing media queries and the appropriate CSS selectors to achieve this goal effectively.
How to Apply Custom CSS on Desktop Only in Elementor
Before we start the tutorial of applying custom CSS only on the desktop, we will briefly explain Device Breakpoints. Device breakpoints refer to the specific screen sizes at which the layout of a website or application changes to accommodate different devices. Here are some commonly used device breakpoints:
| Device | Width | Explanation |
|---|---|---|
| Mobile | Up to 767px | Smartphones and small mobile devices typically fall into this category. The layout is optimized for narrow screens and vertical scrolling. |
| Tablet | 768px to 1023px | Tablets and larger mobile devices fall into this range. The layout may adjust to a wider screen size, allowing for more content to be displayed horizontally. |
| Desktop | 1024px to 1439px | Traditional desktop and laptop screens fall into this category. The layout may be wider, accommodating more content in a horizontal format. |
Adding the CSS Media Query
Well, applying custom CSS on the desktop only is very easy. The only one you need to do is add the CSS media query to your custom CSS snippet.
The @media screen is a CSS media query type targets styles for screens or devices with a visual display. It is one of the most commonly used media types in web design.
When you define a media query with @media screen, it indicates that the styles within the query should apply when the web page is displayed on a screen-based device, such as a mobile phone, tablet, or desktop.
For example, when you want to add the hover effect to the post title in Elementor Posts widget, the custom CSS for all devices or screens you need to add to the posts widget is below:
To use the custom CSS above only apply on the desktop, you need to modify the CSS snippet by adding @media screen and conjunction with a condition (min-width) and also need to add a right bracket (“}“) at the end of the CSS snippet.
The custom CSS will be as follows:
@media screen and (min-width: 1025px) {
selector .elementor-post__title {
display: inline;
}
selector .elementor-post__title:hover {
text-decoration: none;
box-shadow: inset 0 -.2em 0 #bad930;
color: inherit;
}
}
The (min-width: 1025px) condition specifies that the styles within the media query should only apply when the viewport’s width (the area where the web page is displayed) equals or exceeds 1025 pixels. This condition targets devices with a minimum width of 1025 pixels, typically larger screens like desktop monitors.
You can replace the width value if you want to target other devices.
- Mobile Phones:
@media screen and (max-width: 768px) - Tablets:
@media screen and (min-width: 768px) and (max-width: 1024px)
That’s it. Now, you’ve successfully applied the custom CSS on the desktop only. Don’t forget to save or publish your project if you want to.
The Bottom Line
In this tutorial, you’ve explored the process of applying custom CSS exclusively for desktop users in Elementor, a powerful page builder for WordPress. With this knowledge, you can confidently use custom CSS on desktop-only elements in Elementor Pro. You may create stunning designs and improve the user experience for desktop and other device users by utilizing the adaptability and flexibility of media queries.
