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

[Tom]

Hmm, which page is 1127?

[Max]

Page 1127 is the landing page/homepage. You will get there if you click on the “home” button in the menu. I tried the same code with another page-id but that did not work either.

[Tom]

The navigation is set to align left, so the nav-aligned-center class isn’t true.

Try this instead:

@media (min-width: 2317px) {
    body.page-id-1127.nav-aligned-left .main-navigation .main-nav > ul {
    	display: flex;
    	justify-content: center;
    }
}

[Max]

Hm that centered the navigation but it also did more than that. Basically it duplicated parts of the header. You will see once you visit the homepage. Do you have an idea what might be causing this? The header is custom-made with elements and customized with a bunch of css.

[Tom]

Can you try the updated CSS?: https://generatepress.com/forums/topic/centering-post-content-on-single-blog-post-pages-homepage-only/page/2/#post-1153154

[Max]

I believe, that did the trick!

The `display: flex;
justify-content: center;` code I understand, but if you do not mind me asking:

What does the line .main-nav > ul do?

Already a big thank you!

[Tom]

It targets the direct child (<ul>) of the .main-nav element. This applies the flexbox to the <li> elements inside of it, which centers them.

[Max]

Much obliged!

[Max]

Hi there!

I opened the topic again because I noticed an issue which is probably happening due to the code provided here.
I am using the latest version of GP premium and WordPress.
If you take a look at the screenshot I took (first link) you will see that the search bar elements don’t look like they usually do:
At a browser width of 2317px a breakpoint occurs (on specific pages) and changes the opened search bar to what you see in the screenshot. I would like the “X” icon which is used to close the search bar to be located to the far right of the search bar again (where it usually stays).

The only code containing the breakpoint which I found is this one – one of these should be responsible for the “X” jumping to the center:

@media (min-width: 2317px) { 
    body.page-id-1127 .site.grid-container {
       	margin-left: 33%;
		margin-right: 16%;
	}
}   
@media (min-width: 2317px) {
    body.page-id-1127.nav-aligned-left .main-navigation .main-nav, body.page-id-2205.nav-aligned-left .main-navigation .main-nav > ul {
    	display: flex;
    	justify-content: center;
    }
}

Any help would be much appreciated.

Best wishes

Max

[Leo]

Have you fixed this?

It’s working fine for me:
https://www.screencast.com/t/xSDogznL7K

[Max]

Hi Leo!

The issue remains. To me it looks like in your screencast you were still at a resolution below 2317px (even below 1925px- at this width the banner image switches to a broader version) – so somewhat close to FullHD. If you use a native 2K or 4K resolution or drag your browser until it reaches a width of min. 2317px you should see the issue.

[David]

Hi there,

You can try adding the CSS rule – it will contain the search field to the width of the navigation.

@media (min-width: 2317px) {
    body.page-id-1127 #site-navigation {
        display: flex;
    }
}

[Max]

Thank you – that would definitely work. Could I also limit the width of the search field using an absolute value, e.g. 300px?

[Tom]

Hi there,

You could try doing this:

.navigation-search.nav-search-active {
    width: 300px !important;
    left: auto;
}

[Max]

Thank you Tom – that works as well!

[Author]

Posts