Responsive Design
Sections, Columns & Widgets
Preview
Three modes, one layout
Elementor's responsive mode shows you Desktop, Tablet and Mobile versions of your page. You can tweak each independently.
Switch devices
Top bar → Responsive Mode icon\nChoose Desktop, Tablet or Mobile\n# changes you make apply to that breakpoint onlyWhat to check on mobile
- Columns should usually stack (1 column on mobile)
- Font sizes readable without zooming
- Buttons large enough to tap (44px+ height)
- Images scale to fit the screen
Column stack control
In the section's Layout tab, set Columns Gap and use Advanced → Responsive to hide elements on specific devices.
Practical exercise
Switch your three-column features section to mobile mode and make the columns stack into a single column.
This is a free preview lesson
Enroll in the Elementor Page Builder to unlock every lesson, lesson PDF guides, quizzes and your certificate - and start creating your own pieces today.