There are 3 sections in Theme Settings for Responsiveness: Header, Spacing, and Font Sizes.
Responsiveness
This design group provides options to modify the responsiveness configurations to further refine the UX on tablet and mobile.
Responsiveness → Header
Adjust the breakpoint for where the menu switches to the burger menu for tablet/mobile.
If your header is using burger only, this doesn't apply.
Responsiveness → Spacing
Modify the horizontal padding and reduce spacing on mobile.
- Horizontal Padding: This controls the horizontal padding left and right of your content on smaller desktop and tablet devices as well as on mobile.
- Mobile – Reduce Spacing: All POWER modules reduce some of their paddings/margins for mobile devices. This factor controls how much those paddings/margins will be reduced by a percentage value.
Responsiveness → Font Sizes
Font sizes in POWER theme are designed to be responsive based on a percentage of the desktop size.
If you are using a very small font size on desktop, the minimum font size on mobile prevents it from becoming illegible.
- Mobile – Reduce Font Size: All POWER modules reduce most of their font sizes for mobile devices. This factor controls how much those font sizes will be reduced by a percentage value.
- Mobile – Minimum Font Size: Here you can define the font size that should be used as the minimum value in case the reduction would lead to an even smaller value than this one.