Completely Free Course

Connect with Facebook

or

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 Course

Connect with Facebook

or

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

Already Registered? Log In Here

Module 2: Customize The 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

Module 2

Customize The Design

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.