Full Width "Element" Block?

[jaredmaxsnider]

Hello.

I am trying to find a way to place a full width content block into the page and I was wondering if there is an element that will accomplish this. Basically I just want have a div container that stretches 100% of the browser that I can build into. In essence I would like to mimic the way Revolution Slider works so that I can build responsive blocks of visual content into the website. Quite frankly, I can accomplish this with Revolution Slider but the way it works is so convoluted and frustrating I would just rather build the blocks myself. So I just need a container block that stretches across the browser at 100% width that I can build out using custom HTML/CSS. I am hoping this can be done within the structure of the theme”s “Elements” system. Thank you very much for your help.

[Kyle – SUPPORT]

Hi

In the page builder, add a Row element, found under Layout. Then in the row settings set to full width content: http://d.pr/i/14zGu/3p5P1BMJ

– Kyle

[jaredmaxsnider]

Thanks Kyle!

This is heading in the right direction, now I am just having a problem with building the HTML inside this container. I want the HTML to be built on a full width scale as well but when I place the Raw HTML element inside the fullwidth Row element it is still constrained to the center of the page. You can see what I mean here: http://onewayscreenprinting.com/new/ .

I want the red and yellow boxes to stretch full width. Eventually these boxes would be type and images that would lay right up against the boundaries of the container. I hope this pis possible, thank you in advance for your assistance.

– Jared

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.fw-row:not(.row-content-width) .container {
  width: 100%;
}

– Kyle

[jaredmaxsnider]

Awesome, thank you so much Kyle! I don’t want to push the boundaries of free support, but would there be a way to apply the full width to a specific element using my custom class selectors? Like to instead of site wide forcing all the containers to be 100% width to only make ones I select with custom class selectors 100% width and leave the rest as is? I just started investigating this and was looking into Parent Selectors or building my own css styles using the media query rules of the theme’s .container class, but if you know an easier way of the top of your head I would really appreciate it. Thanks again for all your help, hope I am not being annoying.

[Kyle – SUPPORT]

Hi

Yes you can add an extra class on the row and adjust the css to make only those rows full width

– Kyle

[jaredmaxsnider]

Thanks Kyle. I already have custom CSS applied to the row through the “Row Misc Options: Extra Class” section (named .container_base) but nothing happens when I add the “width: 100%” CSS to my stylesheet. I also cannot seem to find where .container_base is being applied when I view the site in Chrome Inspector. Can you tell me how I should be targeting this element? Thank you so much for your continued help, I really appreciate it.

[Kyle – SUPPORT]

Change the css I gave you to:

.fw-row:not(.row-content-width) .container_base .container {
  width: 100%;
}

– Kyle

[jaredmaxsnider]

Perfect. Really appreciate your willingness to help.

[Kyle – SUPPORT]

No problem 🙂

[fdjukic]

Hi
I am haveing similar problem when i put content in a row in first row all is good everithing is in a full width of the browser, but second row (below) all is still boxed, all settings are the same only different thing is that text block is on the left and image on the right (oposite of the first row)?

Any solution?

O sorry I wish for some content on the site to be full width of the browser!

[David Martin – Support]

Please start a new thread and privately post your WP login details.