Archived topic
Padding after Main Menu and Element
8 replies · Started by Thomas on February 15, 2021
Hi there,
I have searched and tried many solutions posted but as yet have found the solution so apologies if I have missed it somewhere in these forums.
On my site's blog page I have added an element which is an element and hooked at "generate_inside_container"
The element is attached to the Navigation menu and I would like it to be separated but can't find where that padding option is located or how to do it?
I am sure I am missing something pretty obvious but just can't seem to find it so any help would be greatly appreciated.
The page in question is located here : https://tbni.blog/blog/
The Element is just below the Navigation menu titled 'Page Hero Test'
Thanks for your help
Hi thanks for that.
I have tried to add it, but to be honest this is all a bit alien to me.
I have installed ‘Simple CCS’ and added that code to the Simple CCS box of the blog page. Is that the correct place because nothing seems to have happened? Or does it need added to the Element somewhere?
Also if possible I would be looking for a slight gap to also be present on mobile devices.
Thank you kindly for your help so far.
Hi there,
There's no need to use Simple CSS plugin. You can add your CSS through Appearance > Customize > Additional CSS.
You can add multiple media rules for multiple viewports.
Example: 50px margin on desktop, 20px margin on mobile.
@media (min-width: 769px) {
.gb-container.gb-container-5a1b3436 {
margin-top: 50px;
}
}
@media (max-width: 768px) {
.gb-container.gb-container-5a1b3436 {
margin-top: 20px;
}
}Thank you so much. That seems to be just the perfect job.
Nice one. Glad you got it sorted. :D
Guys I am sorry to be a real pain here but what was working earlier is now no longer working and the 'Page Hero' I have made is back attached to the main menu with no gap present either in Desktop nor Mobile Views.
The only change I have made is that I made that original page hero a 'Reusable Block' then added it to another page and then converted both back to normal blocks - hooks.
I have tried to add the above code again to the CCS but it now has no impact on the site.
The two pages in question are :
https://tbni.blog/road-racing-results/
Apologies for the hassle and thanks again.
Hi Thomas,
The GB container id changed after that, so the CSS doesn't work anymore.
Actually I think a better way to do this is:
1. Go to the block editor, select the very outside container.
2. Go to spacing, add 50px top margin for desktop, and 20px top margin for mobile.
https://docs.generateblocks.com/article/container-overview/#spacing
Let me know :)
Amazing stuff!
Not sure why I didn’t think of that, but there we go that’s why you guys are the experts.
That worked perfectly for both pages.
Thank you so much once again.
You are welcome Thomas :)
