Pages and posts in the middle of the screen

Support
#1

Hello,

On my website I have the postst / pages on the left and the sidebar on the right.

I want to see the next changes:

  1. Sidebar gone
  2. Posts / pages in the middle
  3. Posts / pages having the same size as they would have if the sidebar would be there. So I don´t want the posts / pages to be full screen.

How do I do this?

Cheers,
André

#2

I already figured the posts out. I tried this:

.single-post .x-main.left {
margin-left: auto;
margin-right: auto;
float: none;
}

.single-post .x-sidebar {
display: none;
}

How to change the pages?

#3

Hi @andre1980,

Thanks for writing in.

You can use page class id number or class page-template so make changes on your pages.

If still not helping, please share us your URL so we could check your site.

Thanks.

#4

Hello Nico,

Thanks. What code should I use then? Can you give my an exemple?

#5

Hi Andre,

Please try this:

.page .x-main.left,
.single-post .x-main.left {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.page .x-sidebar,
.single-post .x-sidebar {
    display: none;
}

In case this doesn’t work, please provide your URL so that we can check.

#6

Hello Jade,

Unfortunately it did not work. Here is the url: https://sitepower.nl/

#7

Hi Andre,

For your pages you can change the template under page attributes. No need for css.

Thanks

#8

Hello Paul,

This is not what I mean. Please read the question above.

Cheers,
André

#9

Hi Andre,

I sincerely agree with Paul, but I would add a CSS

I believe to achieve what you are looking for, change the page template to

Blank CONTAINER HEADER FOOTER

And add the following css to theme options custom css

.page-template.page-template-template-blank-1 .x-main.full {
   
    max-width: 856px;
    margin: auto;
}

Let us know your thoughts.

Thank you

#10

Hello Joao,

It kind of works, but it is not what I meant.

Last year, on the old forum, I asked the same question. And the problem got fixed. Unfortunately, the post on the old forum is not available anymore.

What I am looking for is some code where I can put in the id-number of the page.

  1. I make the page fullwidth
  2. The code makes the page the same width as the page with the sidebar and puts the page in the middle

Cheers,
André

#11

Hey André,

Thanks again for the clarification. You can make use of this css to target a particular page:

.page-id-123 .x-main.full {   
    max-width: 856px;
    margin: auto;
}

Please noticed that I used .page-id-{#} body class to target the page bearing the ID number. If you also want to target a blog post item, you can use postid-{#} for example: postid-1.

Hope this helps.

1 Like