Hi Guys,
Please can you help me I’m trying to create two columns that each have there own full-width backgrounds that should touch the end of the screen, But the text should still be contained in a container like the rest of the rows - How can this be achieved ? I’ve included a screenshot to demonstrate
Best regards,
Zenako
Hi Zenako,
Can you please send us with the URL so we can take a closer look?
Thanks.
Hi Thai,
The site is currently local but the install is clean with the latest version of X Theme, just to be clearer I am trying to keep my text contained so that it is within the margins like the “My Title” section above BUT with each of two columns having it’s own background image that will use the full width of the screen (not contained).
I would also really love to know how can make columns clickable when using multiple columns in a row (in my case 4)
Many thanks,
Zenako
Hello There,
Thank you for the clarifications. You can achieve what you have in mind by setting the column container off and enabling the margin columns option in the row settings. In each of the column, you will need to insert a text element and insert your text. On the left column, place a custom class right in the class field of the text element. In both of the text element settings, please insert this inline css in the style field: color: #fff !important; padding: 20px; max-width: 470px;. I assume that your maximum content width is just 900 pixels. 900 will be divided in two plus some paddings and that is why I am using 470 as the maximum width for both of the text elements. For example result: http://prntscr.com/fxybyj
I am not sure of I have explained it clearly. If you couldn’t get it, please make use the code below as a cornerstone block template.
Please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file
{
"title": "fullwidth-text-contained",
"elements": [
{
"_type": "section",
"title": "Section 1",
"elements": [
{
"_type": "row",
"title": "New Item 1",
"_column_layout": "1/2 + 1/2",
"elements": [
{
"_type": "column",
"_active": true,
"size": "1/2",
"elements": [
{
"_type": "text",
"elements": [],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.",
"text_align": "j",
"style": "color: #fff !important; padding: 20px; max-width: 470px;",
"class": "right"
}
],
"bg_color": "hsla(0, 0%, 0%, 0.7)",
"text_align": "r"
},
{
"_type": "column",
"size": "1/2",
"_active": true,
"elements": [
{
"_type": "text",
"elements": [],
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor. Praesent semper ultricies tellus, rutrum fermentum leo viverra at. Sed a venenatis ante, non aliquam tortor. Aliquam erat volutpat. Curabitur felis elit, rhoncus et molestie in, auctor euismod lorem. Etiam viverra hendrerit metus, vitae ullamcorper metus ultricies ut. Ut eu ex id ligula viverra auctor at quis urna.",
"text_align": "j",
"style": "color: #fff !important; padding: 20px; max-width: 470px;",
"class": "left"
}
],
"bg_color": "hsl(0, 65%, 51%)"
},
{
"_type": "column",
"size": "1/1",
"_active": false,
"elements": []
},
{
"_type": "column",
"size": "1/1",
"_active": false,
"elements": []
},
{
"_type": "column",
"size": "1/1",
"_active": false,
"elements": []
},
{
"_type": "column",
"size": "1/1",
"_active": false,
"elements": []
}
],
"inner_container": false,
"marginless_columns": true
}
]
}
]
}
3] Save the file named as your-filename.csl
4] Upload this file as a cornerstone template to the page that you are editing in Cornerstone. You must import this as a block template.
Hope this helps.
RueNel
Thank you so much for this great answer, cornerstone wouldn’t let me import the .csl but I followed your instructions and figured it out anyway.
Much appreciated
Zenako
Great I am glad you figured it out.
Hi,
I’m trying to make this with Pro but can’t figure out how to make section full screen. https://theme.co/apex/forum/t/stretch-a-section-of-page-to-full-height-and-width/3569
Can you check this please?
Hi There,
Already replied there.
Cheers!
It is possible to do this with cornerstone building options ?
Hi There,
Yes, this is feasible in Cornerstone, to do this turn off your ROWs Column Container option and turn on the Marginless Columns option, this will make the 2 columns go full-width. Add left padding 6% to the left column and a right padding 6% to the right column, this padding prevents your content from going to the edge of the section.
Thanks,
The solution with the 6% padding works only until a screen resolution under 1.380 px (if you’re settings are max width 1.200 pixel and 88% site width). Over that resolution the “container” grows lager!!! So again, there is no final solution to do this directly in cornerstone without extra css or code. This, full width row background but still use the container thing, was easily done in visual composer with “inner container” or nested rows. Why so complicated in cornerstone/pro??
Hi There,
You can add padding to your columns without the need of CSS as the option is available on the builder.
Sincerely it is not complicated at all. Maybe it works differently from VC but it is not complicated.
Please click on your column and set your padding.
Hope it helps
Thats what i exactly did Joao!!! The result you can see in the screenshots!! The 6% in the column works so far if you don’t have a screen resolution over 1.380 px!!! the second screenshot is 1.920px!
Hi there,
To assist you more on this and focus on your case kindly open up a separate thread and get back to us with the URL/User/Password of your WordPress Dashboard using the Secure Note functionality of the post and the name of the page in question to follow up.
Kindly do not add the information here as the Secure Note is visible to us and the original poster of the topic.
Than kyou for your understanding.