Archived topic
block element top margin is applied to site container, rather than the element
5 replies · Started by Duncan on May 21, 2021
Hi,
I've created a block element which I am hooking in to "inside_site_container" on the front page only. This is to serve as anannouncement area, which currently states "As we all come out of lockdown we’re so pleased to be up and running again and to be able to announce new dates."
The link to the site is provided in the private information below.
I've also added some css to add some top and bottom margin to the site container to provide some space between the container and the primary navigation above it and the footer below it:
.one-container .container {
margin:16px auto;
}The problem is that when I add top margin to the headline block, it seems to add that margin to the site container, rather than to the headline block within the site container. To demionstrate the issue, I've added 200px of top margin to the headline block. You can see that the headline block is stuck to the top of the site container, rather than having that margin above it.
I hope that makes sense. How can I have that margin apply to the headling block rather than the site container?
Thanks
Duncan
Hi there,
Any reason why you've added it as an element instead of just the page content since it's only on front page?
Let me know :)
Hi Leo,
My thinking was to provide an element that my client could edit and/or set as a draft to deactivate it and remove it from the page, if it was no longer needed. That way, it would be easier for them to update or remove the message without having to edit the front page.
If they removed the block directly from the front page, they would lose the design if they wanted to put it back again.
Hope that makes sense.
Thanks
Duncan
I see.
Try wrapping a container block outside the headline block.
Thanks Leo, that worked!
Not sure why it didn't work with just the headline block, but I'll mark this one as resolved.
No problem :)
