A Step-By-Step Guide to Fixing Mobile Issues in Elementor

Share This Post:


Step 1: Identify the Issue

The first step is to identify the issue. Open your website on various mobile devices and see how it looks. If it doesn’t look right or if certain elements aren’t displaying correctly, make a note of these issues.

Step 2: Access Elementor Editor

Login to your WordPress website, go to the page with the issue, and then click “Edit with Elementor.”

Step 3: Switch to Mobile View in Elementor

At the bottom of the editor panel, you’ll see a desktop icon. Click on this icon and select ‘Mobile’ to switch to the mobile editing view.

Step 4: Locate the Problem Area

Scroll through the mobile view and locate the section, column, or widget that isn’t displaying correctly.

Step 5: Adjust the Settings

There are a variety of settings you can adjust to improve the mobile view. Here are some things you might need to adjust:

– Column Width: In the Layout tab, you can adjust the width of your column for mobile view.

– Font Size: In the Style tab, you can adjust the text size for different devices.

– Margin and Padding: In the Advanced tab, you can adjust the margin and padding. You can unlink the values and set different margins/paddings for different devices.

– Responsive Controls: Elementor also offers responsive controls for various widgets. You can hide or show different widgets on different devices.

Step 6: Test Your Changes

After making adjustments, it’s important to test your changes. Click the “Update” button to save your changes and then view your website on a mobile device to see if the issue has been fixed.

Step 7: Repeat

If there are more issues, you’ll need to repeat this process for each problematic section, column, or widget.

Step 8: Responsive Mode in Elementor

Once you’ve adjusted and corrected your pages, ensure to review them in the Responsive Mode provided in Elementor. This feature allows you to instantly see how your pages would look on different devices.

Remember, the aim is not to have the mobile site look exactly like the desktop site, but to have a user-friendly mobile version that reflects your brand and performs well. Elementor offers powerful tools for this purpose, and by following these steps, you can solve many of the common issues that come up in mobile view.

LinkedIn | Portfolio 

Lewis Sweeney

Freelance Web Developer

I’m a freelance web developer based in Manchester, England and I build and fix websites all day every day. I specialise in WordPress, WooCommerce and Shopify sites so whether you’re looking for a brand new site build or have bugs on your existing one get in touch…