Column margins when nested within a full-width column or container

[JFG]

Hi,

Let's say I have a full-width single column or container block (to be able to place a background color to the whole width of the browser) and that within that column or container, I place another column block (say, with two columns, let's call it column B) and make it wide-width. On mobile, the margins that would otherwise apply to column B are gone. If column B was not nested within the full-width column or container, it would have some left and right margins on smaller screens and the content would not touch the side of the browser. But because column B is nested within thew full-width column or container, we loose those margins and the content touches the sides of the browser. I know I can place padding and margin in the settings of the block but I want it to match and align with the other wide-width columns on the page that are not nested in a full-width container... does this make sense?

Basically, I just want to be able to apply a full-width background color to content that is either normal-width or wide-width and that the margins be the same as the other normal or wide-width content on that page that isn't in a full-width container...

If you resize the browser to its minimum width or if you look on mobile in the URL included, you'll see what I mean...

Thank you...

https://karen-yates.com/testing/

[colleencamacho]

Nested Columns are simply columns within columns. For example, you could add two 1/4 column inside a 1/2 column, which would mean the nested columns will be 1/4 of the 1/2 column they are in, and 1/8 of the entire page width. And with the release of Avada 7, Nested Columns also have Flex features. Read on to find out about this useful design tool in the Avada Builder, and watch the video for a visual overview.
Step 1 – Create a new page, or edit an existing one.

Step 2 – Activate the Fusion Builder by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 3 – Insert a Container, then add columns into it. In each column, there’ll be a ‘+ Element’ button.

Step 4 – Click the ‘+ Element’ button, then switch to the ‘Nested Columns’ tab.

Step 5 – Simply click the column layout you’d like to add to the page. Once you added, it’ll be displayed as a ‘Nested Columns’ element.

Step 6 – To add content into nested columns, click the ‘Edit’ icon on the ‘Nested Columns’ element. Once you do that, a window with your columns will appear.

Step 7 – On this window, you can edit the nested columns and add elements into them. Once you’re finished editing the columns, click ‘Done’.
The edit screen within each Element. At first glance, the Nested Columns Element does not have any Element Options. This is because they are in the individual columns of the Nested Columns Element, rather than the parent element itself.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Breaking it down, here’s how it works:

Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.
Be aware of the limitations and bugs around xpressbees track your order , like the inability to use some HTML elements as flex containers.

[sonfrai223]

When you have a column nested inside a full-width column or container, it's important to pay attention to the column margins. If the nested column has margins that push it beyond the full-width container, it can cause layout issues and make the design look unprofessional.

To avoid this issue, you should make sure that the margins on the nested column are set in relation to its container, rather than the body or viewport. For example, you might set the left and right margins of the nested column to be a percentage of the width of the full-width container, rather than a fixed pixel value.

Alternatively, you can use a grid system or a framework that automatically handles the column margins for you, ensuring that they are always properly aligned and nested within their containers. This can save you time and effort, and help ensure that your design looks consistent and professional across different devices and screen sizes.

[Author]

Posts