Set Different Font Sizes on Desktop and Mobile

What is Responsive Design in GemPages?

In GemPages V7, the Responsive Design feature allows you to create and optimize pages for various screen sizes, which means you can customize designs for each device, including desktop, tablet, and mobile views.

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.