Setting font sizes for tablet/mobile devices

Here's how you can tweak font sizes based on the screen/device size. This will allow you to further customise your designs on mobile and tablet rather than relying on the default Global responsive styling.

Tweak font sizes based on device type

Access the module you wish to apply custom font sizes. This can vary since accessing the settings differs between certain modules.

1. For all modules (eg. the Text Editor), you can access the settings by clicking the wrench icon.
2. Next, a modal pop-up window will appear with several tabs. To adjust the styling, click the 'Style' tab at the top of the window.
3. Next, depending on what settings you're adjusting, you'll see options for Typography including adjusting the font size and alignment for that view. By default you should be in the Desktop view, identified with an icon resembling a desktop computer.
4. Toggling (or clicking) the Desktop icon will change it to a Tablet icon, and clicking again will change it to a Mobile icon. These toggles allow you to make adjustments that only display in devices detected as having the relevant screen size. You'll also notice the EE Builder itself will reflect a change, giving you an idea within the builder of how your edits will appear in the selected device view.
5. Once you've selected the appropriate device by clicking the icon next to (or above) the fields you're editing, you can now edit the fields in the same way you would for the default (Desktop) view. When you're done editing, click 'Save'.
6. You can now change the view in EE Builder back to Desktop, either by clicking the Mobile icon again or selecting the 'Exit' option that appears above your content in the Responsive Editing mode.

You've now made changes the reflect device types.