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

Home Forums Support centering post content on single blog post pages + homepage only

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1144713
    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

    #1144858
    Leo
    Staff
    Customer Support

    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 🙂

    #1146024
    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?

    #1146040
    Leo
    Staff
    Customer Support

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

    #1146076
    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.

    #1146250
    Leo
    Staff
    Customer Support

    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 🙂

    #1147307
    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).

    #1147578
    Leo
    Staff
    Customer Support
    #1148458
    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.

    #1148464
    Leo
    Staff
    Customer Support

    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

    #1148624
    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)?

    #1149826
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1150283
    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.

    #1150736
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1151571
    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?

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.