How can I make a component take up the full width of the screen?

Question

I've got my content in my website, ready to be styled by my designer. The first thing that they want to do is make the menu take up the full width of the screen. The appears to be something in the 960 grid that keeps the page from consuming the full width of the available screen real estate. Here's an example of what my page currently looks like: (The background is white, but if you click on the image, you can see that the webpage is not using the full width of the screen.)

My designer told me that they could fix it, but that they would have to override some of the built-in CSS classes that come with the 960 grid, or that I'd have to put the content that I want to be "full-width" outside of the standard <div> containers (i.e.<div id="header">, <div id="main">). I can't find a way to put my components outside of the main <div> containers, and I'm not sure that it using SXA the right way, even if I could do that.

How are we supposed to allow for a component to span the full width of the screen?

Answer 1

Find your theme item (/sitecore/media library/Project/Tenant/Site/Site Theme) and check following check boxes:

This will add following css classes to the page body element:

• header-wide
• content-wide
• footer-wide

so your footer, header, content placeholders will have full width.