Responsive and Alignment Options
Responsive web design is an approach to website design that ensures users have a good viewing experience no matter what type of device they’re using. Responsive web design consists of three development principles. To work properly, all three of these need to be implemented:
- Fluid containers
- Media queries
- Flexible images and media
There are also other points which need to be taken into consideration, like font sizes, line heights, letter spacings, etc. JupiterX customizer provides options for these principles, thus allowing you to have a fully responsive website.
Where I can set different options on different devices?
Customizer provides different options on different devices on many feautres, but not all of them.
Whenever you see an icon displayed on an image below, it means that you can customize this option on different devices:
In the image above, it means that we can choose to, for example, display a logo on desktop but hide it on mobile devices.
Elementor responsive states
The feature can be also found in the page builder Elementor, which works pretty much the same way.
What options have the responsive states?
It is important to understand that responsive states option is not available for all of the settings in the customizer, but only for the ones that actually need it.
Generally, the responsive states option is available for displaying elements, alignment of content, margin and padding of the elements, font sizes.
Example: Configuring the Body Font Size on Different Devices
Check your body font size on different devices to notice the made difference.
Where can I set Alignment in Customizer?
Option for alignment of content in customizer is available only for content that needs to have this option.
Example: Configuring Header Content Alignment on Different Devices
Check your header on different devices to notice the made difference.