Lesson 20: Responsive Design — Mobile & Tablet Views

Objectives

• Understand responsive design principles
• Use Elementor's responsive editing mode
• Adjust layouts, typography, and spacing for different devices
• Hide/show elements per device
• Test and debug responsive issues

What is Responsive Design?

Responsive design means your website adapts to look good on all screen sizes — desktop, tablet, and mobile phone. Over 60% of web traffic comes from mobile devices, so this isn't optional.

Elementor's Breakpoints

Elementor lets you customize your design for each breakpoint independently.

Switching Between Device Views

In Elementor:

1. Click the responsive mode icon at the bottom of the left panel (looks like a monitor/device)
2. Or press Ctrl + Shift + M
3. Choose Desktop, Tablet, or Mobile

What Changes Per Device:

The canvas resizes to show how your page looks on that device. When you're in tablet or mobile view:

• A device icon appears next to settings that can be adjusted per device
• Changes you make in tablet/mobile view only apply to that device size
• Desktop settings are the default — tablet and mobile inherit from desktop unless overridden

How Elementor Handles Responsiveness

Automatic Behavior

Elementor handles many things automatically:

• Multi-column sections stack vertically on mobile (3 columns become 3 rows)
• Text scales down slightly
• Images resize to fit the screen
• Padding and margins remain unless you change them

What You Need to Adjust Manually

Despite auto-responsive behavior, you'll often need to tweak:

• Font sizes — desktop headings are too large on mobile
• Padding/margins — desktop spacing is often too generous on mobile
• Column order — sometimes you want a different stack order on mobile
• Hidden elements — some elements don't work on mobile (large decorative images)
• Button sizes — may need to be full-width on mobile

Adjusting Typography Per Device

The Device Icon

Many Elementor settings show a small device icon next to them. This means the setting can have different values per device.

Example: Responsive Heading Size

1. Select a Heading widget
2. Go to Style → Typography → Size
3. Click the device icon next to the Size field
4. Set different sizes:
   • Desktop: 48px
   • Tablet: 36px
   • Mobile: 28px

Recommended Font Sizes:

Adjusting Spacing Per Device

Padding and Margin

1. Select a section, column, or widget
2. Go to Advanced → Margin or Advanced → Padding
3. Click the device icon to set different values per device

Example: Section Padding

• Desktop: 80px top and bottom
• Tablet: 60px top and bottom
• Mobile: 40px top and bottom

This prevents mobile sections from having too much empty space.

Column Behavior on Mobile

Default Stacking

By default, columns in a multi-column section stack vertically on mobile. A 3-column section becomes:

Desktop:    [Col 1] [Col 2] [Col 3]
Mobile:     [Col 1]
            [Col 2]
            [Col 3]

Reversing Column Order

Sometimes you want the image below the text (or vice versa) on mobile:

1. Select the Section
2. Go to Advanced tab
3. Switch to Mobile view
4. Find "Reverse Columns" → Set to Yes

Adjusting Column Width on Tablet

Columns might be too narrow on tablet. You can adjust:

1. Select a column
2. Switch to Tablet view
3. Go to Content → Column Width
4. Set it to 50% (so 3 columns become 2+1) or 100% (stacks like mobile)

Hiding/Showing Elements Per Device

Some elements work on desktop but not on mobile (or vice versa):

To Hide an Element on Specific Devices:

1. Select the element (section, column, or widget)
2. Go to the Advanced tab
3. Find Responsive section
4. Toggle "Hide On Desktop", "Hide On Tablet", or "Hide On Mobile"

Common Uses:

• Hide decorative images on mobile — they take up valuable space
• Show a simplified menu on mobile — hide the desktop mega menu
• Hide complex multi-column layouts and show a simplified mobile version
• Show a "Call Now" button only on mobile — visitors can tap to call

Example: Mobile-Only Call Button

1. Create a Button widget: "Tap to Call" with link tel:+15551234567
2. Go to Advanced → Responsive → Hide on Desktop → Yes
3. The button only appears on mobile

Responsive Images

Image Sizing

Images automatically resize to fit their container, but you might want to:

1. Select the Image widget
2. Switch to Mobile view
3. Adjust the Width (e.g., 80% instead of 100%)
4. Change Alignment if needed

Background Images

For sections with background images:

1. Select the section
2. Switch to Mobile view
3. Go to Style → Background
4. Adjust Position (try Center Center)
5. Adjust Size (Cover usually works, but try Custom if needed)
6. Consider using a different image for mobile (a vertically-oriented version)

Mobile-First Considerations

Touch Targets

• Buttons should be at least 44px tall on mobile (Apple's guideline)
• Links should have enough spacing so fingers don't tap the wrong one
• Make buttons full-width on mobile when appropriate

Content Priority

• Put the most important content first on mobile
• Remove secondary content that clutters the mobile experience
• Keep forms simple — fewer fields on mobile

Navigation

• The hamburger menu (☰) is standard on mobile
• Make sure your menu items are tappable and readable
• Consider reducing menu items on mobile

Testing Responsive Design

In Elementor:

1. Switch between Desktop, Tablet, and Mobile views
2. Scroll through the entire page in each view
3. Check that nothing overflows, overlaps, or looks cramped

In Browser (More Accurate):

1. Save and publish your page
2. Open it in Chrome
3. Press F12 to open DevTools
4. Click the Toggle Device Toolbar icon (or press Ctrl + Shift + M)
5. Select different devices from the dropdown (iPhone, iPad, etc.)
6. Or drag the viewport edges to test any width

Responsive Checklist:

• Headings are readable on mobile (not too large, not too small)
• Text doesn't extend beyond the screen edges
• Images resize and don't overflow
• Buttons are large enough to tap
• Spacing looks proportional on all devices
• Multi-column layouts stack cleanly on mobile
• No horizontal scrolling on mobile
• Forms are usable on mobile
• Maps display correctly

Exercises

1. Review your homepage on mobile: Switch to mobile view and scroll through your homepage. Note everything that needs fixing.

2. Adjust heading sizes: Set responsive typography for all your headings — different sizes for desktop, tablet, and mobile.

3. Fix section padding: Reduce padding on mobile for all sections (40px instead of 80px).

4. Hide an element: Find a decorative element on your homepage and hide it on mobile.

5. Create a mobile-only element: Create a "Call Now" button that only appears on mobile devices.

6. Test in the browser: Use Chrome DevTools to test your pages on different device sizes. Check iPhone, iPad, and a small Android phone size.

7. Fix all responsive issues: Go through your homepage, About page, and Contact page in mobile view and fix every issue you find.

Key Takeaways

• Over 60% of visitors are on mobile — responsive design is mandatory
• Elementor lets you set different values per device (click the device icon)
• Columns automatically stack on mobile, but you may need to adjust
• Reduce font sizes and spacing on mobile
• Hide elements that don't work on mobile (Advanced → Responsive)
• Buttons should be tap-friendly — at least 44px tall
• Test in both Elementor's responsive mode AND Chrome DevTools
• Common fixes: smaller headings, less padding, stacked columns, hidden decorative elements

Next Module: Module 4 - Essential Plugins