Many settings in Elementor have individual settings for different screen sizes, you can do this by:
- Click the desktop icon of the setting you wish to edit.
- Choose the screen size you wish to edit for by clicking its relative icon.
This way you can edit settings or set background images for specific screen sizes.
You can hide an entire section from showing on specific screen sizes:
- Go to the section’s advanced settings by clicking then the “Advanced” tab.
- Click on the “Responsive” drop-down panel.
- Under the visibility section, you can choose which devices to display the section on.
You can also reverse the order of columns in that section by switching the “Reverse Columns” buttons under the “Responsive” panel.
You can set custom breakpoints for tablets and mobile devices by:
- From your WordPress dashboard, click on “Settings” under Elementor.
- Click on the “Style” tab.
- Set your custom breakpoint value in the box next to “Tablet Breakpoint” and “Mobile Breakpoint.”
- From your WordPress dashboard, click on “Tools” under Elementor.
- Then regenerate CSS by clicking on “Regenerate Files.”
You can preview how your pages look on tablets and mobile devices by clicking on “Responsive Mode” in the bottom panel, then choosing which device you want to preview on.