To change an item only on mobile view (and not tablet or desktop) in Elementor Pro, follow these steps:
🔧 METHOD 1: Use Elementor’s Responsive Controls
Elementor has built-in responsive settings.
✅ To hide/show widgets per device:
- Click the widget you want to change.
- Go to the Advanced tab → Responsive.
- Use these options:
- Hide on Desktop ✅
- Hide on Tablet ✅
- Leave “Hide on Mobile” unchecked ❌
👉 Now this widget will only show on mobile.
- Duplicate the widget if needed:
- Create one version just for mobile, and another version for desktop/tablet.
- Use the responsive controls above to show/hide accordingly.
🛠 METHOD 2: Custom CSS for Mobile Only
If you want to change styles, not hide/show, use custom CSS with media queries.
✅ Steps:
- Click the widget → Advanced → Custom CSS (only in Elementor Pro).
- Paste CSS like this:
@media (max-width: 767px) {
selector {
/* Your mobile-only styles here */
background-color: red;
font-size: 14px;
}
}
📌 The selector refers to the current widget, column, or section.
💡 Bonus Tips:
- Mobile width breakpoint in Elementor = 767px and below.
- To test your design:
- Use Elementor’s preview icon (bottom left of panel).
- Toggle between Desktop / Tablet / Mobile views.
Here’s how to find Elementor’s Responsive Controls so you can show, hide, or style elements specifically for mobile, tablet, or desktop:
📍 Location of Responsive Controls in Elementor:
🔹 For Hiding Elements on Specific Devices:
- Click the widget, column, or section you want to edit.
- Go to the left panel.
- Click the Advanced tab.
- Scroll down to the Responsive section (usually at the bottom).
- You’ll see options:
- ✅ Hide on Desktop
- ✅ Hide on Tablet
- ✅ Hide on Mobile
✅ Check the boxes for the devices where you want to hide the item.
❌ Leave unchecked for devices where you want it to show.
🔹 For Responsive Design Controls (Padding, Margin, Font Size, etc.):
- Click the widget.
- Go to the Style or Layout tab (depending on what you’re editing).
- Look for the device icon.
- Next to fields like:
- Padding
- Margin
- Typography
- Image size
- Click that device icon.
- Now you can enter different values for:
- Desktop
- Tablet
- Mobile
🔹 To Switch Preview Modes:
- Bottom of the Elementor panel → Click the monitor icon 🖥️
- Choose:
- Desktop
- Tablet
- Mobile
Thank you for reading! Please stay connected with me on all my social media platforms. @djmakeart
For more updates, tips, and inspiration. Don’t forget to explore my website djmakeart.com for exclusive content and projects. Let’s create and grow together—see you there!
Contact us through www.djmakeart.com/contact-us/
🛠 Step-by-Step: How to Create a Vertical Video Template
Why Yoast seo setting doesnt appear
Why Yoast SEO may be malfunctioning on your website
Why is SEO Yoast option is not working ?
Which camera is better, Canon or Sony?
Where to Buy the Best Used Camera Gear in 2025: Trusted Sites & Smart Tips
Where can I find free VFX content for editing?
When Can You Start Making Money on Instagram? (2025 Creator Guide)
When Can You Make Money on YouTube?
Welcome to the DJMakeArt website
