- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
February 1, 2023 at 10:09 am #2517354
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?
February 1, 2023 at 12:07 pm #2517484Ying
StaffCustomer SupportHi there,
Go to customzier > layout > container > Container Alignment, and select the
Textinstead ofBoxes.For more info: https://docs.generatepress.com/article/container-alignment/
February 1, 2023 at 3:53 pm #2517709MMS
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
February 1, 2023 at 4:08 pm #2517723Ying
StaffCustomer SupportIt’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.
February 2, 2023 at 3:32 am #2518331MMS
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;
}February 2, 2023 at 5:40 am #2518457David
StaffCustomer SupportHi there,
add the border to the top of the site container instead:
.site { border-top: 2px solid #ebebeb }February 2, 2023 at 6:06 am #2518476MMS
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?
February 2, 2023 at 7:06 am #2518541David
StaffCustomer SupportAh… 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
February 2, 2023 at 7:16 am #2518558MMS
Perfect! Many Thanks
February 2, 2023 at 7:32 am #2518577David
StaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.