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.

Many 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 many settings separately for desktop, tablet, and mobile.

Quick summary

In the Elementor editor, click the device icons (Responsive views) in the top bar to switch to tablet or mobile view. Many style settings — font size, padding, column behavior — can be set differently for each device. Changes flow downward: a change on desktop also applies to tablet and mobile unless you've set a different value there, but a change on mobile doesn't affect desktop or tablet.

What you'll need

The Elementor editor open

Understanding responsive breakpoints

By default, Elementor divides screen sizes into three views:

View	Represents
Desktop	Screens wider than 1024px
Tablet	Screens between 767px and 1024px wide
Mobile	Screens under 767px wide

These are Elementor's default breakpoints. Your site may use different values, or extra views such as laptop or widescreen, which are set in Site Settings → Layout → Breakpoints.

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 in the top bar for the device icons (Elementor calls them Responsive views): a desktop, 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 switch views with the keyboard shortcut Ctrl+Shift+M (Windows) or Cmd+Shift+M (Mac).

What changes between devices

Many 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, side-by-side 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 (the pencil icon).

Check the device icon next to the Size field shows the phone. If it doesn't, click it 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 for "Hide On Desktop," "Hide On Tablet," and "Hide On Mobile." (The last two may be labeled "Hide On Tablet Portrait" and "Hide On Mobile Portrait" instead.)

Toggle "Hide On Mobile" if you want the element to disappear on phones only.

On sites using Elementor's newer V4 elements, the setting is in a different place: switch to mobile view, select the element, then go to Style → Layout and set Display to None.

Hiding elements does not remove them from the source

Hiding an element only stops it showing on that device. It isn't deleted: it stays on the page, and you can still select and edit it in the editor. If a large image is only meant for desktop, ask us about the lightest way to handle it.

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

I changed the font size on mobile but desktop also changed — why?

Make sure you selected the mobile device view before changing the size. A value you set in desktop view carries down to tablet and mobile too, unless those devices have their own value. You need to have the device-specific view active, and the device icon next to the size control must show the correct device.

My columns look fine on desktop but stack weirdly on mobile — how do I control this?

By default, columns stack on mobile (top to bottom in the order they appear left to right on desktop). To reverse the stacking order, switch to mobile view first. On a container layout, select the parent container, go to the Layout tab, and under Items click the Column Reversed direction icon (the upward-pointing arrow). On an older section layout, use the Reverse Columns option in the section's Advanced tab, under Responsive.

Can I set a different background image for mobile?

Yes. Select the section or container, switch to mobile device view, go to Style → Background, and set a different background image (or upload a mobile-optimized version of the original).

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Learn more

Elementor: Responsive editing for mobile and tablets

Making your page look good on mobile

On this page