Infinity Pro Full Width Content Area

[bradm413]

Theme: Infinity Pro
How can I make the middle content area be 100% of the page width? I'm using Beaver Builder to add elements to pages, and I can't get it beyond 1280px wide. My site is not live yet, so I can't link here, but this demo page is a good example of what I'm trying to widen:

https://demo.studiopress.com/infinity/contact/

Thanks!

https://demo.studiopress.com/infinity/contact/

[Victor Font]

Normally, you can't make a child section larger than its parent. A typical page wraps all of its content in a site-container object. The site container or its wrap is set to your 1280px.

Child objects, those objects placed within the site container are limited by the parent's width.

You can either set the entire page to 100% width and make select child areas smaller by adjusting margins or padding. Or, you can use negative margins to force a child object to be wider than its parent.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[bradm413]

Hi Victor,

Yes, I think the route I need to take is to make that page width 100% and then use margins/padding to space things correctly. I attempted to do it myself with the following CSS but it didn't seem to work:

.full-width-content .content .site-inner {
    max-width: 100%;
}

I've tried some other variations that didn't seem to do anything either. My approach is usually to view the page, then use the browser's built-in tools to "inspect element", and then try to find which CSS to edit. Usually I can figure it out, but I think I'm missing something major here.

Is my approach the best way to figure out these kinds of edits? And what did I miss?

Thanks!

[bradm413]

Just checking to see if anyone had any insight on how to do this. 100% main content area

[Victor Font]

Until you have the site to a point where you can display it publicly so we can see your CSS to suggest the change, looking at a demo site won't help, especially when you're using BB and the demo site isn't.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[bradm413]

Hi Victor, thanks for the reply. I have setup a test site that has BB installed:

http://test.genesisbay.com/about

Technically, though, the way I'm currently using BB is to just add "content" inside the available container on the page. BB is only working within that middle content section, so I figure if I can expand that, I should be able to achieve what I'm going for.

Thanks!

[Henrik Blomgren]

Do you want it to be the whole browser width or the "full-width" of 1280px on your pages?

If you want it to be full-width aka 1280px on your page?

.full-width-content .content {
    border-right: none;
    float: none;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 840px; */
    width: 100%;
}

on line 665 in style.css. This will make the page with 1280px wide. Beware that this will turn every page that uses the full-width-content choice will be this large.

If you want the whole browser width? Then that is a heavy customization your going to have to do. As you need to add

.page .site-inner {
    max-width: none;
}

To your style.css and then you need to sit and redo every single padding/margin that is in use.

Another way of doing it is to find the element you want to make full-width and simply add

.your selector or block or whatever you want to be full-width {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}

the above is taken from https://richtabor.com/gutenberg-image-alignments/ but it should work on elements as well.

So what you would do there is fine the element you want, like a image

normally the outputed code would be

But with the above choice you would enclose it in a wrap.

<div class="yourselectortowideneverythingtofullwidth">

</div>

Or I have missunderstood what it is you want to do and all of this is rabble.

[bradm413]

Thanks, Henrik! Your first solution was the one I was looking for!

.full-width-content .content {
    border-right: none;
    float: none;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 840px; */
    width: 100%;
}

[Author]

Posts