Step 1: Access Responsive Mode
In Elementor, open the page you want to review.
Look at the bottom left of the editor and click on the Responsive Mode icon (the little screen).
You’ll see three device options:
Desktop
Tablet
Mobile
Step 2: Check and Adjust Tablet View
Click on Tablet.
Scroll through your page carefully.
Check for:
Text that looks too large or too small.
Images that are awkwardly placed or squished.
Sections that have too much or too little padding.
Adjust the following as needed:
Typography: Resize fonts under Style > Typography.
Padding/Margins: Go to Advanced and adjust padding or margin values.
Layout Direction: Switch from row to column in containers if needed (for example, side-by-side sections should often stack vertically on tablets).
Step 3: Check and Adjust Mobile View
Click on Mobile.
Scroll through the page again, reviewing each section.
Look for:
Text and images that are too close to the edges.
Buttons that are too small to tap easily.
Sections that don’t stack or display properly.
Adjust these as needed:
Container Padding: Add at least 20–30px padding on left and right sides.
Button Sizes: Make sure buttons are large enough to tap easily (minimum 44px height is recommended).
Image Sizes: Ensure images fit within screen width — set Width to 100% if needed.
Step 4: Hide/Show Elements for Specific Devices (Optional)
If something doesn’t look right on mobile or tablet but looks great on desktop:
Select the element.
Go to Advanced > Responsive.
Choose to Hide on Desktop, Tablet, or Mobile depending on the situation.
Step 5: Preview and Test
After making changes, click the eye icon (Preview Changes) at the bottom.
Test the page by resizing your browser window manually.
You can also use your actual phone or tablet to check how your page looks.
Homework & Action Items
-
Open every page on your site in Tablet View and adjust font sizes, spacing, and layout where needed.
-
Open every page in Mobile View and adjust text, images, and button sizes.
-
Add appropriate padding on all sides for tablet and mobile views.
-
Test your site on an actual mobile device and ensure all buttons and links are easy to tap.
-
Hide any desktop-only elements that don’t look good on mobile.
-
Publish your changes after reviewing each page.