Home>Support>How to create a full width row with margin left and right?

How to create a full width row with margin left and right?

By Andreas Stefani, 7 years ago. Last reply by Alex S, 7 years ago.

Hello team,

I have one question about building a row with a tiny margin to the left and right.

I tried to add the Layout “Full Width Stretched” to a row and then add a margin-left and margin-right via CSS to that row, but it doesn’t work. It stays in the Full Width mode without a margin on the left and right.

For example:
The row should have a width of 90% of the viewport and the remaining 10% should be split to margin-left (5%) and margin-right (5%).

How can I achiev this?

Hope you can help me out.

Thank you,
Andreas

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Andreas,

    You can do this via gutter, cell padding or widget padding.

    You can directly apply spacing inside of the row by opening the row and selecting the only column. Head over to the right and head down to the Cell 1 Styles settings group. Open the Layout and set the padding to 0 10 0 10 and set it to %. How does that look?

    If you have multiple columns in this row, you could apply gutter by opening the row and heading over to the row styles sidebar. Open the Layout settings group. Set the gutter as desired. Please note that that the gutter will be split evenly between all columns.

    Please open a widget inside of the row and head over to the widget styles sidebar. Open the Layout settings group and set the padding to 0 10% 0 10, set it to % based and save. How does that look?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More