Shutting Down Notice

I have decided to shut down launchparty.org and discontinue our tutorials and templates.

Sadly, it's just not going to be possible to execute LaunchParty’s long-term vision with the new Elementor 3.0 design system.

Our website will be accessible (but not updated) until November 1, 2020. If you plan on using our templates after we shut down, be sure to download our preview images.

If you have any questions, feel free to contact me.

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

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Already Registered? Log In Here

Day 3: Improve Your Design

How To Adjust The Mobile Layout In Elementor

Matthew Averkamp

Tutorial Action Plan

Action Plan

Step 1: Adjust The Mobile Layout


Complete The Following Tasks

Learn how to adjust the widget width (px and %) on tablet and mobile.
Learn how to adjust the widget alignment on tablet and mobile.
Learn how to adjust the column width on tablet and mobile.
Changing the column width on tablet and mobile allows you to have different layouts on different devices.

For example, if I have a 2-column section on desktop, I could change it to a 1-column section on tablet by adjusting the width of each column to 100%.
Learn how to reverse the column order on tablet and mobile.
When you click Edit Inner Section, go to Advanced > Responsive and use the Reverse Columns toggles for tablet and mobile.
Learn how to hide widgets on tablet and mobile.
When you edit a widget, go to Advanced > Responsive and use the Hide On toggles to hide widgets on desktop, tablet, and mobile.

An advanced use-case of this feature would be to add different widgets for different devices. For example, Widget #1 could be hidden on mobile, and Widget #2 could be hidden on desktop and tablet.

This same technique could also be used for entire sections or entire columns.
Make sure to always review any changes you make to your website on desktop, tablet, and mobile.
You Earned A Badge!

Watch Our Video Tutorial

Continue To The Next Tutorial Below

Day 3

Improve Your Design

Your Progress
0

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.