How To Set Page Widths In Oxygen

Updated On
13-Jan-2020
By
Liz Jamieson

In Oxygen Builder, you can define an overall default page width for the entire site, and a different page width for any pages or posts you happen to want to be a different page width from the default.

Setting the Global Page Width In Oxygen

The site wide page width is set in Oxygen by visiting :

I would normally set the value there to around 1140px. I do this because eleven40 was always my favourite theme from Genesis.

Changing The Page Width For Exceptions

But I don't want 1140px to be the width for all pages on the site. Generally I'd want certain templates to be narrower.

While editing a page, post or template, you can make individual adjustments here :

The idea would be to set any pages you wanted to not be the same width as the setting in the global page width setting, individually via the Page Width settings.

Known Bug

But there is a known bug already described in the Oxygen Github repository which means the width setting mechanism described above doesn't currently work.

While it is possible to set the site-wide setting, the override for individual templates and pages isn't working and all pages remain at the setting chosen site wide.

It'll work when it's fixed, but right now we need a workaround.

Oxygen Workaround For Setting Page Widths

In my case, I generally want a wide home page and everything else to be narrower. Then for certain landing pages I want those to be narrower still. So for example I might require the following widths :

  • home page 1140px
  • pages and posts 940px
  • most landing pages 800px
  • some landing pages 1140px

As most pages are going to be around 940px wide, it seems sensible to set the Oxygen site wide setting to 940px, and then deviate occasionally from there for the home page and various landing pages.

Identifying Landing Pages And The Home Page

In WordPress, each page has a class on the body tag that indicates its id, and whether or not it is child of another page. There is also a class that tells us if a page is the site's home page, or in the case of posts, which category it belongs to.

Given these body tag classes, it is easy to use CSS to change the page width depending on the page, post, category or parent page.

Here's the CSS I'm using to set the home page and landing pages to different widths, to the width set in the site wide page width setting.

If you do this, of course you will need to use class names that correspond to your parent pages and individual pages.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram