Set Different Font Sizes on Desktop and Mobile

What is Responsive Design in GemPages?

GemPages supports responsive design, which means when you change font size in mobile view, it change automatically in desktop view as well.

Some design settings like Font Size, Line Height, and Padding are responsive by default. But if you want full control (for example, a larger heading on desktop and a smaller one on mobile), you’ll need a manual workaround.

How to Set Different Font Sizes on Desktop and Mobile

Step 1: In the top toolbar of the GemPages editor, click the mobile icon. This lets you preview and design your page specifically for mobile.

Step 2: Right-click the section or text element you want to customize. Choose “Duplicate.”

• The original section will be used for mobile (let’s call it Section A).
• The duplicated section will be used for desktop (Section B).

Step 3: Set Visibility for Each Device

• Select Section A, open the Visibility settings, and hide it on desktop.

• Select Section B, and hide it on mobile.

Now each section will only be shown on its respective device.

Step 4: With the visibility set:

• Customize Section A with a mobile-friendly font size and spacing.
  
• Style Section B with a layout optimized for desktop users.

You now have full control over how your text appears on different devices.