Responsive and Alignment Options

Last Updated on

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:

  1. Fluid containers
  2. Media queries
  3. 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

1
From the WordPress left menu, go to Appearance > Customize.

2
From the customizer left dashboard, go to Fonts & Typography.

3
Go to the Typography tab and click on Customize next to Body.

4
Configure the Font Size option.

5
Switch to another device (tablet or mobile) by hovering on the desktop icon.

6
Configure the Font Size option again.
7
Publish the changes.

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

1
From the WordPress left menu, go to Appearance > Customize.

2
From the customizer left dashboard, go to Header.

3
Configure the Align option using it’s 2 options; align left or align right.

4
Switch to another device (tablet or mobile) by hovering on the desktop icon.

5
Configure the Align option again.
6
Publish the changes.

Check your header on different devices to notice the made difference.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket