Step 1: Switch to Tablet View
-
Click Edit with Elementor on your homepage if you’re not already in it.
-
At the bottom of the Elementor panel, click the Responsive Mode icon (monitor symbol).
-
Choose Tablet view to begin optimizing for mid-sized screens.
Step 2: Adjust Heading and Text Sizes
-
Scroll to the top section and click on your main heading.
-
Go to Style > Typography, and reduce the font size until it feels balanced (try ~30–35px).
-
Click on the text paragraph and reduce it to around 17px.
Step 3: Resize Image
-
Click on your main image.
-
In Style > Width, reduce the width slightly for breathing room.
-
In Style > Height, adjust so the image doesn’t feel squashed.
-
Go to Advanced > Padding, unlink the values, and set the Top Padding to 150px.
Step 4: Adjust About Company Section
-
Click the container for the About section.
-
Go to Advanced > Padding, unlink values.
-
Set Left and Right Padding to 30px to prevent text from touching the edges.
Step 5: Stack Containers for Tablet
-
In the 3-column service block, click the outer container.
-
Change Layout > Direction to Column Vertical.
-
For each inner service container:
-
Go to Advanced > Padding, unlink values.
-
Set: Top: 200px, Right/Bottom/Left: 10px.
-
Step 6: Adjust Background Image for Tablet
-
Click on the background image container.
-
Go to Style > Background > Size, set it to Cover.
-
Set Position to Center Center.
-
Go to Advanced > Margin, unlink values, and set Top Margin to 80px.
Step 7: Add Padding to Testimonials
-
Click the testimonials container.
-
Go to Advanced > Padding, and reapply:
-
Top: 100px, Bottom: 100px, Right: 30px, Left: 30px.
-
-
Repeat this padding update for the next testimonial container as well.
Step 8: Hide the Panel to Preview
Click the left arrow in Elementor to collapse the panel.
Preview how your section looks on tablet view.
Step 9: Switch to Mobile View
At the top of the responsive preview, click Mobile.
Scroll to the top of the homepage and begin reviewing the layout.
Step 10: Adjust Image Width
Click on the main image, go to Style > Width, and set it to 100%.
Step 11: Reduce Container Padding
Click into your main container, go to Advanced > Padding, unlink values.
Set all sides to 20px for consistent mobile margins.
Step 12: Resize Service Columns
For the service label container, go to Layout > Width, set to 50%.
For the arrow icon container, set the width to 42%.
Adjust based on how it looks on your screen.
Step 13: Adjust Arrow Spacing
Click into the arrow icon widget.
Go to Advanced > Margin, unlink values.
Set the Bottom Margin to -10px to center vertically.
Step 14: Copy and Paste Styles for Efficiency
Copy the styled container from one service block.
Right-click the next service container > Paste Style.
Repeat for all 3 service blocks.
Do the same with the arrow containers to keep styling consistent.
Step 15: Add Padding to Beige Section
Click on the beige outer container, go to Advanced > Padding, unlink values.
Set Right and Left Padding to 20px.
Click into the yellow inner container, set all paddings to:
Top/Bottom: 30px, Right/Left: 20px.
Step 16: Add Padding to Footer Section
Click on the footer container, go to Advanced > Padding, unlink values.
Set Top: 20px, Bottom: 50px, and Right/Left: 20px.
Step 17: Update Image Box Alignment
Click into the Image Box widget (used for testimonials).
Go to Style > Content > Alignment, and set it to Left.
Repeat for each testimonial box or use Paste Style to speed things up.
Step 18: Final Mobile Polish
Scroll through the entire homepage and check for:
Overlapping text
Cramped elements
Missing spacing
Use Advanced > Margin/Padding to tweak and clean up anything that feels off.
Homework & Action Items
Open your site on a tablet, mobile phone, and a laptop browser window at half size. Note anything that looks off and adjust them.
Click on every button, link and menu item to make sure those are working properly.
- Make sure no text is pressed up against the edge of the screen, and that there’s at least 20px of padding on the mobile sides.