Create a row where only one column follows "global container"

[michigancreative]

Hey All!

I am making a row with text on the left and a background image that extends to the edge of the screen on the right (using some scroll parallax). I am using the global container for most of the other rows, but since I need the image to extend to the edge I couldn’t use that for this row, however I would like the row containing text to line up with the other rows above it that follow the global container.

What’s the best way to do this? Could I set the row as “global container” and somehow make the column with the background image extend to the edge of the screen anyway?

Thanks!

[ruenel]

Hello @michigancreative,

Thanks for writing in!

Columns do not have a Global Container option. It can only be found in the Row elements. You can nest another Row element inside the Column element instead. We would like to check out your mocked layout or if you already have an example page, send to us the URL of the page so that we can inspect it.

Best Regards.

[michigancreative]

Hey @ruenel

Thanks so much for your help.

Attached in a private note is my url information, attached is a screenshot of what I am talking about and the link is what I have.

Thanks!

(this is an example of my mockup)

(this is what I have made)

I would like the content to have the same left padding as the content above it, but I want the column with the image to extend all the way to the right of the browser window. Is this possible?

Thanks!

[ruenel]

Hello @michigancreative,

Thanks for updating in! To get your issue resolve, simply do the following:

1.) Remove the background image in your column.
2.) Click the section, Section > Setup > Background, and enable the “Advanced” mode.
3.) Insert the background image
4.) Set the size to 50% and position it to “Top Right”

The result will be like this:

Kindly let us know how it goes.

[michigancreative]

Hey @ruenel

Thanks so much for your reply. I tried this and it didn’t quite work how I wanted, but it’s a good trick to learn regardless, I can see the application of this in other situations.

However, in my situation I need the image to “cover” fully that half of the row as well as have parallax within that half. This will only work if the content is short and therefore doesn’t cause the image to display the background above and below the image.

Ideally it would be great if I could set the row as full width: 100%, set the column to “stretch” and set it to 50%, and then let the column with text follow the padding/margin that the other rows that use “global width”. Almost like if we could force that specific column to break out of it’s containers “width”/“max-width” parameters.

Does this make sense? I just want the text that appears next to this image to sit in line on the left with the content that is above it that is using the global container - while making the other column go all the way to the edge of the screen.

Thanks!

[ruenel]

Hello @michigancreative,

You could try to insert a DIV element and a Row element inside a one-column Row container like this:

You would have to position the DIV element as “Absolute” and then set the width to “50%” so that it will always be half the width of the Row.

You will be adding the background image on the DIV element while the text will be on the first column of the nested 2nd Row. The 1st Row element will have a 100% width so that it will be fullwidth.

Hope this makes sense.

[michigancreative]

Hey @ruenel

This solution is perfect! How smart. Thank you so much for showing this to me. I will be using this all the time now.

You are the best, you have answered many of my questions in the past. Thank you so much!

[tristup]

Hi @michigancreative,

Glad that we are able to help you.

Thanks