Today's website visitors are more commonly using their phone to browse your website. That means to make your strongest impression your website has to look great for users on every medium, mobile, desktop, tablet and more. Use Elementor's visual Mobile Editing tools to quickly turn any page 100% mobile responsive, no coding needed.
Elementor includes five main responsive design tools. Follow the steps in the video above and you'll know how to make a 100% mobile responsive website.
Sometimes headlines and text look great on desktop, but don't look great on a smaller screen. Switch the editor to mobile view, go to Style > Typography, and reduce the size.
Under the Content tab, you also have the option to adjust the alignment.
When you create a page with Elementor, your columns are automatically built to display on mobile. However, when you view your site on a mobile screen your columns may look different than you expected. Images may appear before text, for example. To fix this select your column, go to Section > Advanced > Responsive and turn on Reverse Columns.
Sometimes you've created a section with more than one column side by side. When you switch to a mobile screen Elementor will automatically display them vertically. If you want to have the columns displayed side by side - but smaller - on a mobile screen, select the column, and on the Layout tab select Column Width (select Mobile) and choose 50%. Then select the next column and do the same. They should display side by side in a mobile view.
Elementor allows you to set different values for padding and margins for mobile formats. For example, a page that looks great on desktop may have too much space between the logo and the header text on mobile. To fix this, go to Advanced, find Margins, select Mobile and set the top margin to 0.
Also, a value for padding that looks great on desktop may squeeze the text too much on mobile. So go to Advanced, Padding, and select 30, for example.
An easy way to build assets that look great on desktop and mobile is to create a version for each, and then use the Hide function to hide certain elements on desktop or mobile. For example, create a large button that looks great on desktops, then go to Advanced > Responsive > Hide on Mobile.
Then you can do the same for the mobile version of your button. Select the button, go to Advanced > Responsive > Hide on Desktop.