A container row in Dotcom refers to the horizontal section of the container that helps arrange elements or widgets. The elements and the content of the widgets are placed inside the container.
A container row is a functional component that can be customized using its three sections in the customization panel.
In this section, we’ll walk you through how to configure the advanced settings of the container row.
Steps to configure the advanced settings of the container row
- Hover over the element or widget and click on the container row icon. The customization panel loads on the screen’s right side. Go to the Advanced tab to set the advanced customization for the container row.
Advanced Section
- Change the Margin by first selecting the size unit as px, %, em, or rem from the dropdown. Now, fill in the Top and Bottom values individually while the Left and Right values are adjusted automatically for different screens. Select the Outline icon to set the same value for the Right and Left margins simultaneously.
- Adjust the Padding of the container. Fill in the Top, Right, Bottom, and Left values individually. Select the outline icon to set a uniform value for all four parameters simultaneously.
- Next, select Top or Bottom to make the container row Sticky. Select None if you don’t want this feature.
- If you select Top or Bottom, the Sticky On feature is applied, by default, for Desktop, Tablet Portrait, and Mobile Portrait. You can add or remove the options.
- Adjust the Offset value using the range slider. The offset value sets when sticky behavior starts. For instance, if you set it to 5 pixels, the element stays in place until it's 5 pixels from the top (or bottom) of the screen. After that, it becomes sticky until scrolled back up.
- Adjust the Z-Index value.
- Fill in the CSS ID and CSS Classes values.
Responsive Section
- Expand the Responsive section and configure the Reverse Columns toggle for Mobile and Tablet. You can enable the corresponding toggles if you want the content inside the container to reverse and align to the mobile and tablet device screen size.
NOTE: This is useful when you have multiple columns in a single container.
Visibility Section
- Expand the Visibility section. Here, edit the visibility criteria of the container across various devices by adjusting the toggle positions for Hide on Desktop, Hide on Tablet Portrait, and Hide on Mobile Portrait.
- Click on Save and then, Preview to get a preview of your web page.
That ends our guide on how to edit the container row’s advanced settings on Dotcom.
If you have any questions regarding this topic, we recommend reaching out to our implementation specialist or contacting our support team for further assistance.
To understand the pricing plans for Dotcom, we encourage you to visit our pricing page, where you can explore the different options available. If you would like to discover the complete range of features and benefits offered by Dotcom, we invite you to schedule a demo with our team.