[Resolved] Align logo on homepage with blog matrix

[MMS]

Hi, I have a 3 x 3 home page layout on https://makemesustainable.com but when I try to align the logo in the header with the left-hand edge of the blog thumbnails using the Customize > Layout > Header – (Current setting Header padding Left=60) this only works at one screen size if I resize the browser the logo moves around. Is there a way to lock the alignment of the logo to the edge of the thumbnails for any browser window size for the home page? BUT is it also possible to align the logo separately on the individual blog post pages?

[Ying]

Hi there,

Go to customzier > layout > container > Container Alignment, and select the Text instead of Boxes.

For more info: https://docs.generatepress.com/article/container-alignment/

[MMS]

Hi ‘Text’ is already selected. The settings under layout are:- Container width 1400px ; Separating space 10px ; Content separator 1.5em ; CONTENT LAYOUT = separate containers ; CONTAINER ALIGNMENT = Text ; CONTENT PADDING T=20 R-0 B=10 L=0

[Ying]

It’s because the GB container which contains the posts has left and right padding, if you set the container’s left and right padding to 0, they should align well.

[MMS]

Hi, I’m afraid that doesn’t work either. What does work is to set the Header Width to “Contained” rather than “Full” this fixes the problem. However, if I do that the following CSS that adds a thin grey horizontal line under the header no longer extends to the edges of the screen. I’ve got this setup on the homepage new so you can see it at https://makemesustainable.com
Is there any way to adjust the CSS below to make the line extend to the edge of the screen i.e. beyond the contained header?

.site-header, #mobile-header {
border-bottom: 2px solid #ebebeb;
}

[David]

Hi there,

add the border to the top of the site container instead:

.site {
    border-top: 2px solid #ebebeb
}

[MMS]

Hi, Thanks. That worked on the home page but not on other posts / pages. Is there a way to get it to work across the whole site?

[David]

Ah… ok, thats a pain 🙂

1. Remove my CSS
2. Add back your CSS
3. Set the Site Header cotainer to full width
4. Add this CSS:

.inside-header {
    max-width: 1360px;
    margin: auto;
}

Adjust the max width to suit. Its simply the Cotainer Width eg. 1400px minus the sum of the left and right padding eg. 40px. So 1400 – 40 = 1360px

[MMS]

Perfect! Many Thanks

[David]

You’re welcome

[Author]

Posts