I am working on a WordPress site that was put together with bootstrap. I am trying to get a row with a class of container-fluid so that it will be 100% of the browser window and then add the container class to center the content. The idea would be to achieve a look like the one that is at the bottom of this page. The footer area has a red button that says “Find out more” yet that rows background color is dark and spans 100% while the content is centered. Does anyone have any idea how I can achieve this look?
The big trouble is that I want to be able to use the SiteOrigin page builders abilities to set the background image and styles of the row but they are all cropped to the center of the page. Is there any work around or some fix to nest rows?
Hi ThemeBuddies,
You don’t need to use any additional CSS to do this. You can actually do this by adjusting the row layout. Please open the row you wish to apply this effect too and head over to the row styles sidebar. Open the Layout settings group and set the Row Layout to Full Width. For reference, here are what the different row layouts do:
Standard – the standard theme container
Full Width – Full width of the page with a content container
Full Stretched – Full width of the page, no content container
You can apply a background image or color by opening the Design settings group and setting it as desired. This will affect the entire row and it won’t be locked to the content area.
Hello Alex. Thank you for the reply. It’s good to know that those options are there but unfortunately, they don’t do anything. I have tried all three layouts and my rows don’t change. They are all 100% wide with 100% wide content. I am trying to achieve the parallax look on some of the rows. So those options would solve the problem I have been trying to fix for a few days.
I think the problem is with my theme. I switched over to 2017 and they work. I am just not sure what the issue is right now.
FIXED! Thank you for pointing that out. I needed to wrap my content in a container that was centered. Then the settings to stretch the content area worked.