-
ashokvas
I have created a Blog post hero element ( setting it as Page hero ) and given a width of 800 px to my main container of the element.
The Page hero element contains the header, featured image, published date , author name
My main container width in the Customiser is set to 1000 px
When I try to use the page hero element with a post, the content width is showing wider than the hero section
How do I make the content width to match my page hero width?
Here is the url of the post
https://www.smartbabyadvice.com/test-post-new/
Should I use a content template for the content section and set the width to match the hero section?
Please advise me as I am very new to GP/ GB and have just started to use them
-
Hi there,
your main Container has max width set to 1000px and it has 40px of Padding ( desktop ), 30px of Padding ( Mobile ).
If you want the Page Hero to align with the content then you should apply the same to your hero container eg. Sizing > Max Width = 1000px and Spacing > Padding to 40px.
-
ashokvas
Thanks David for the response
I want to keep my Hero section and content section at 800 px but I want my footer area to be 1000px wide
How do I do that?
In fact I was seeing some Youtube videos where they keep the featured image also at 1000 px and the other parts at 800px
I am not sure what is the best sizes to use nowadays for blog posts, considering that most readers are on mobile
Would appreciate some guidance if possible
-
ashokvas
I want to make my post like this
https://dogfoodheaven.com/grain-free-fda-warning/
The page hero and content is the same width but the footer template is bigger width.
If I set my container width to 1000 px in the GP customiser, then how will I be able to have a wider footer?
-
ashokvas
I have set my container width in the customiser as 1000
-
OK, in the Customizer set the widest width you require eg. 1000px.
Then in Appearance > Elements -> Add New Layout Element.
https://docs.generatepress.com/article/layout-element-overview/
On the Content tab just set the Content Width to 800px
And set the Display Rules to Posts > All Posts.
This will only apply to the posts content. -
ashokvas
I was able to set it
It works fine
https://www.smartbabyadvice.com/test-post-new/
If I want to make the hero section wider to say 900 px, will the content layout remain at 800px?
-
If you use a GP Block Element for the Hero then you can set the Max Width of the Contaienr Block to 900px.
The content width will remain 800px -
ashokvas
ok thanks
Will check it out
-
ashokvas
But will the author box and the footer also be set to 800px as per the layout element, or can I atleast make the footer 1000px?
I had sent you a sample post
-
ashokvas
I also want to set the widths for my Pages – I will be using the same Page hero for header and same content width 800 px for the content.
So do I add the locations as All Pages as well in the various elements?
-
But will the author box and the footer also be set to 800px as per the layout element, or can I atleast make the footer 1000px?
The author box is inside the content container, so no, you can not set it be wider than 800px if you are using a layout element.
Yo will need to remove the layout element, and create a block element – content template for single posts, and set the root container’s
max-width
to800px
, so the post content area can be 800px, while the comment area remains at 1000px.The footer (black) is full-width, I’m not sure what you are referring to.
So do I add the locations as All Pages as well in the various elements?
Yes, the elements can be shared with different locations, you can add all pages to it.
- You must be logged in to reply to this topic.