Reducing the width of all pages and posts

Hello

Loving the theme so far, it’s great, but I was wondering if there was some CSS code I could use to reduce the width of all pages and posts. Right now, I’m seeing a lot of empty space on the left and the right, and I was wondering whether this width could be reduced to show the background colour/image, depending on what you’ve set it to.

Many thanks

James

Dear James,

I thought you don’t need to add custom CSS code because the Page Builder has a feature to manage it. It can be set by enabling “Full Width Stretched” row layout. Go edit your row > Row Styles > Theme > Row Layout.

Regards,
Kharis

Hi Kharis

I know how to enable the full width stretched layout, but what I was asking for is to reduce it the with of the pages themselves, sort of how Page builder resizes the website for tablet of mobile use. Page Builder has an option to set the width when people are using tablets, but not for computers. I guess what I’m wondering is whether there is some CSS for reducing the width of all pages on a computer to make it look like this (A screenshot of the Sydney theme demo in tablet view)

Regards

James

Dear James,

I would like to apologize in advance for the mislead.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:768px){
  
  html,
  body{
    overflow-x: hidden;
  }
  
  .container,
  .panel-grid{
    width: 100% !important;
    max-width: 100% !important;
  }
  
}

Let me know if that is what you are looking for.

Regards,
Kharis

Hi Kharis

Thanks for the help so far, but unfortunately its not what I’m after.

The CSS you’ve supplied makes the page contents move to the edges of the screen. Now it looks like this.

I’ll try to explain by doing a little photoshop of my webpage. What I want is for it to look like this on a computer.

Kind Regards

James

Okay, I’ve figured it out

For anyone that is looking to box their site layout, then use:

.page {
max-width: 1218px;
margin-left: auto;
margin-right: auto;
}

Regards

James

Dear James,

I would like to apologize in advance for the mistake.

I am glad to know you have been able to manage it. And thank you for sharing. I really appreciated it.

Regards,
Kharis

Hi Kharis

One last thing, because I’ve reduced the width of the page, and changed the colour of the background, Full-Width pages and default template pages that I used for the posts seem to be offset from the menu bar and footer. This was unnoticeable because before, the background colour was white on white. Changing the page template to Front page solves this problem, but I lose the sidebar and its widgets.

At the moment, it looks like this.


Anyway I can fix this?

Many thanks

James

Okay, managed to make it perfect now. Here’s the CSS code needed to modify the width’s of all page templates.

# Front Page
.page{
max-width: 1218px;
margin-left: auto;
margin-right: auto;
}

# Other Pages
body {
width: 1218px;
margin-left: auto;
margin-right: auto;
}

# Container for other pages (area that isn't header footer, the bit in between)
.container {
    width: 1218px;
}

Then you need to go to ‘Customise > General’, drop both "Page Wrapper"s to 0. That should get rid of the gap.

That’ll do for Now

Regards

James

Dear James,

Thank you for sharing. I really appreciated that. It would be very useful for others.

Regards,
Kharis