In this article, we’ll explain the Massive Dynamic theme responsive options.
Responsive Guide
By using Massive Dynamic options you can set changes that you want on different devices.
Header Responsive Option
Open the website in site setting mode.
Navigate to the Header >> Responsive
There you can set the “Logo Skin” and the “Header Skin”.
* Just remember you need to upload a dark and a light logo in the Branding section of the site setting panel.
Also, you can activate or deactivate the “Sticky Header”.
Custom Background:
By using the “custom background”, you can change the following values:
Background Color: Change the responsive background color.
Icon Color: Change the color of the menu icon in the responsive view.
Menu Background: Change the background color of the menu in the responsive view.
Menu Color: Change the color of the menu items in the responsive view.
Separator Color: Change the color of the separator.
Responsive Container Width Option for laptop
Open the website in site setting mode.
Navigate to the Content >> Main Layout.
There you can see “Custom Laptop Width”
If you turn it on, you can set the different content width for the laptop devices.
If you want to set the same container width on Desktop devices and laptops, just deactivate that option.
Responsive Container Width Option for Tablet
Open the website in site setting mode.
Navigate to the Content >> Main Layout
There you can see “Custom tablet Width”
If you turn it on, you can set the different content width for the tablet.
If you want to set the same container width on Desktop devices and tablets, just deactivate that option.
Row Responsive Option
For accessing the row responsive options
Open the page which you want in edit content mode.
Open the setting panel of the row.
Open the responsive tab.
There you can see the responsive options.
Hide Row on different devices
On the responsive tab, you can see the list of the different devices.
By deactivating the visibility option of each device that you want, you can hide that row on it.
Set Padding And Margin On Different Devices
After adding a row, you can set the padding for it by dragging and dropping.
You can change the value of it by using the padding option of each device from the responsive tab of the row setting panel.
Also, you can set the margin for the row on different devices.
The order of the margin value or the padding value is:
Top Right Bottom Left
Responsive Background Image Option
There are 3 options for adding different row images for desktop devices and tablets and mobile devices.
So you can set the proper images on different devices from the row background option.
Column Responsive Option
For accessing the column responsive options
Open the page which you want in edit content mode.
Open the setting panel of the column.
Open responsive tab
There you can see the responsive options.
Hide column on different devices
On the responsive tab, you can see the list of the different devices.
By deactivating the visibility option of each device that you want, you can hide that column on it.
Set Padding And Margin On Different Devices
After adding a column, you can set the padding for it by dragging and dropping.
You can change the value of it by using the padding option of each device.
Also, you can set the margin for the column on different devices.
The order of the margin value or the padding value is:
Top Right Bottom Left
Column Width Option
This option changes the column width on different devices.
By using the column width, it can be full or half.
Text Shortcode Responsive Option
After adding the text shortcode to the page in the edit content mode, by opening the setting panel of it you can find the responsive option.
There you can change the alignment of the text on different devices.
Rich Text Shortcode Responsive Option
There are responsive options of the Rich Text shortcode on the “Design” tab of the setting panel of it,
There you can change the alignment of the text on different devices.
Image shortcode Responsive Option
There is a responsive tab from the image shortcode setting panel.
Open it to see the list of the different devices and their options.
You can change the “image height” and the “image size” for each device that you want.
Empty Space Shortcode Responsive Option
From the setting panel of the “Empty Space” shortcode, you can change the height of it on different devices.
There is a “Hide in Responsive Mode” option for hiding it on responsive devices.
Icon Box Shortcode Responsive Option
On the responsive tab of the setting panel of the icon shortcode, you can change the alignment of it on different devices.
Icon Box Side Shortcode Responsive Option
On the responsive tab of the setting panel of the icon Box Side shortcode, you can change the alignment of it on different devices.