Making your page look good on mobile
Learn how to use Elementor's responsive editing tools to control how your page looks on phones and tablets.
Most website visitors use a phone. A page that looks perfect on a desktop can look cramped, oversized, or broken on a small screen. Elementor lets you adjust almost every setting separately for desktop, tablet, and mobile.
Quick summary
In the Elementor editor, click the device icons at the bottom of the canvas (or in the top bar) to switch to tablet or mobile view. Most style settings — font size, padding, column behavior — can be set differently for each device. Changes on one device do not automatically affect the others.
What you'll need
Intermediate 15 minutes- The Elementor editor open
Understanding responsive breakpoints
Elementor divides screen sizes into three views:
| View | Represents |
|---|---|
| Desktop | Screens wider than approximately 1025px |
| Tablet | Screens between approximately 768px and 1024px |
| Mobile | Screens smaller than approximately 768px |
Your design is created on desktop first. Tablet and mobile are adjustments on top of that.
How to switch to mobile or tablet view
In the Elementor editor, look at the bottom of the canvas for a row of small icons: a desktop monitor, a tablet, and a phone.
Click the tablet icon to enter tablet view. The canvas resizes to show how the page looks on a tablet.
Click the phone icon to switch to mobile view.
Click the desktop icon to return to the full desktop view.
You can also access these icons from the top bar of the editor.
What changes between devices
Most of Elementor's style settings are responsive — they have a small device icon next to them. When you see this icon, you can click it to switch which device you are setting the value for.
Common settings that often need mobile adjustments:
- Font sizes — headings that look great at 60px on desktop may need to be 36px on mobile
- Section padding — 100px top/bottom padding may be too much on mobile; try 40–60px
- Column behavior — by default, columns stack vertically on mobile (this is usually correct)
- Image sizes — may need to be constrained on small screens
How to adjust font size for mobile
Switch to mobile view using the device icons.
Click the heading or text widget you want to adjust.
Go to the Style tab and open the Typography controls.
Click the device icon next to the Size field and select "Mobile."
Enter a smaller font size. The change applies only to mobile. Desktop view is unchanged.
How to adjust padding for mobile
Switch to mobile view.
Click the section or widget you want to adjust.
Go to the Advanced tab and find the Padding controls.
Click the device icon next to Padding and make sure "Mobile" is selected.
Enter the values you want for mobile. These override the desktop settings on small screens.
Hiding elements on certain devices
Sometimes an element looks fine on desktop but clutters the mobile view. You can hide it for specific devices:
Click the element you want to hide.
Go to the Advanced tab.
Find the "Responsive" section. You will see toggles or checkboxes for "Hide on Desktop," "Hide on Tablet," and "Hide on Mobile."
Toggle "Hide on Mobile" if you want the element to disappear on phones only.
Hiding elements does not remove them from the source
Hiding an element on mobile still loads it — it is just invisible. For large images hidden on mobile, consider removing the element entirely on mobile to improve page speed.
Testing your mobile layout
After making changes, always preview the actual page on a real phone. The editor preview is a good guide, but real devices show the truth. See Previewing tablet & mobile views for how to preview before publishing.
Common questions
Related guides
- Previewing tablet & mobile views
- Spacing, margin & padding
- Changing colors & fonts
- Working with columns
- Elementor & page speed
Need a hand?
Learn more
Working with columns in Elementor
Learn how to add, resize, reorder, and style columns inside Elementor sections to create side-by-side layouts.
Previewing tablet & mobile views in Elementor
Learn how to preview how your page looks on phones and tablets before publishing, using Elementor's built-in device preview modes.