[Resolved] centering post content on single blog post pages + homepage only

[Max]

Hi there!

I am using the latest GP premium.

At the moment, once you open a post on my website, it is not displayed in the center of the page. The center alignment includes the post column + the tag cloud.

What I would like to achieve:

Move the center alignment/focus only onto the post column excluding the tag column – only on single blog post pages, so not on other archive pages. Of course this means that the white space on the left and right would not be distributed evenly anymore. Perhaps this could be achieved by adding extra white space to the left of the post column or redistributing the white space altogether on these pages (in percentages)?
I would like to try out these changes on my (static) home-/landing page as well.

Thank you in advance for your time and best wishes

[Leo]

Hi there,

Can you try this CSS and see if that’s what you are after?

body.single .site.grid-container {
    margin-left: 520px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Max]

Hi Leo,

I think that will not work so well.
First off, I changed margin-left to margin-right (since I wanted there to be more white space on the left) but if I use a different screen/screen resolution the whole thing gets displayed in a completely different and off way. That means when it comes to responsiveness creating more white space via using fixed pixel widths would not be a good solution I guess? That is why I asked whether it is possible to use percentages, as in: left margin: Always display 40% white space and right margin: Always display 20% white space. This way the post column would be fixed exactly in the middle of the screen independent of different screen resolutions/ratios (only on desktop of course). Would it not be possible to influence the width of the columns on post pages this way?

[Leo]

Can you try the same CSS but use margin-left: 20%; is that works for you?

[Max]

I modified the value and also added/changed the percentage of margin-right to make it fit perfectly on other screens as well – so it worked with a few modifications!
The other page’s appearance I changed by using the according page-id.

Thanks for the help!

A quick followup question: Would it be possible to achieve something similar for the primary navigation in the header and at the same time only apply it to specific pages, e.g. the homepage and the single post pages? I will probably open another support ticket for this but I wanted to get your opinion first.

[Leo]

Not sure if I fully understand.

The navigation is currently set to center so it should be center regardless the screen size?

Let me know 🙂

[Max]

All right – then I will try to describe it more in detail in this thread:

The issue is that the centered menu looks nice on some pages/screen resolutions but once you change the screen resolution/width of the page, it looks sort of odd. The left-aligned menu on the other hand looks better in these cases.

That is why I wanted to know whether it is possible to change the menu/primary navigation alignment/position
1.) in relation to the page which is displayed, or the page type (e.g. single posts) with the according selector and
2.) in relation to the screen resolution/width with the @media rule (it would apply to two different screen resolutions).

[Leo]

1. You can use this filter:
https://docs.generatepress.com/article/option_generate_settings/#options-%E2%80%98nav_position_setting%E2%80%99

2. We could do that as well. What breakpoint do you have in mind?

[Max]

1.) The filter works splendidly! Is there a way to apply it to specific pages as well?

2.) The breakpoint in question would be 2317px but basically I only want to apply that change to one page.

[Leo]

1. You would need this conditional tag:
https://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

All the available conditional tags are listed on that page.

2. So if we want to change something for a specific page at 2317px, this would be an example:

@media (max-width: 2317px) {
    body.page-id-xxx .main-navigation {
        background-color: #000;
    }
}

or

@media (min-width: 2317px) {
    body.page-id-xxx .main-navigation {
        background-color: #000;
    }
}

Each page has a unique page/post ID in the <body> tag:
https://www.screencast.com/t/cDuo4EHtp0

[Max]

1.) Thank you – that conditional tag is very useful indeed.

2.) Sure – I knew that method. The thing I have not yet understood is how to change the navigation alignment depending on the breakpoint with the @media rule. I mean is it as simple as align-items: center (or the like)?

[Leo]

2 The navigation is aligned center with this CSS:

.nav-aligned-center .main-navigation {
    text-align: center;
}

So let’s say if yout to align left below 1000px, this would be the CSS:

@media (max-width: 1000px) {
    .nav-aligned-center .main-navigation {
        text-align: left;
    }
}

[Max]

Hi Leo,

Somehow that did not seem to work. I used this code:

@media (min-width: 2317px) {
    body.page-id-1127 .nav-aligned-center .main-navigation {
    	text-align: center;
    }
}

The standard navigation alignment is “left” – the php filter switches it to “center” on single post pages. However, the alignment of the homepage (the page-id is correct) is still left even though I applied the above css. I only want it to be centered on that homepage starting at inner window width 2317px.

[Tom]

Hi Max,

Try this instead:

@media (min-width: 2317px) {
    body.page-id-1127.nav-aligned-center .main-navigation {
    	text-align: center;
    }
}

nav-aligned-center and page-id-1127 are both applied to the body element, so no space is required.

Let me know 🙂

[Max]

Hi Tom!

Unfortunately that did not work either – I tried it in different browsers and added am !important behind the text-align: center line.
Does this specific CSS perhaps conflict with the abovementioned php filter?

[Author]

Posts