Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

Or sign up with email below...

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Day 3: Improve Your Design

How To Adjust The Mobile Layout In Elementor

Action Plan

Step 1: Adjust Widget Alignment And Hide Widgets

Watch Our Video Tutorial For This Step

This video will walk you through how to adjust widget alignment and other responsive settings on desktop, tablet, and mobile. You will also learn how to hide widgets on specific devices such as mobile.

Video Summary

  • Use the “Responsive Mode” button to preview your website on desktop, tablet, and mobile (0:08)
  • In Elementor, many settings can be adjusted for each of the three screen sizes (0:24)
  • Click the small grey circle next to “Alignment” to open up the desktop, tablet, and mobile options (0:47)
  • Adjust widget alignment on mobile (1:03)
  • When nothing is selected it will inherit the larger device setting (1:29)
  • Adjust the image size on mobile (1:50)
  • Hide a widget on mobile by going to Edit Widget > Advanced > Responsive > Hide On Mobile (2:43)
  • When you hide a widget, you have to view your live site and change your browser size to see the changes (3:14)

(I adjusted different widget settings on desktop, tablet, and mobile)

Step 2: Adjust Column Width And Column Order

Watch Our Video Tutorial For This Step

This video will walk you through how to adjust the column width on tablet and how to reverse the column order inside a section on mobile.

Video Summary

  • To adjust the column width on tablet, go to Edit Column > Column Width (0:36)
  • Column widths should equal 100%, otherwise they won’t fit on the same row (0:55)
  • Change both columns to 100% on tablet to create two rows (1:20)
  • Reverse the column order on mobile (1:59)
  • Make sure you are editing the correct section when reversing the column order (2:20)

(I adjusted the column width on tablet and reversed the column order on mobile)

Continue To The Next Tutorial Below

Day 3

Improve Your Design

Your Progress

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.