Archived topic
Add padding to top of certain pages (general site padding needs to be turned off
9 replies · Started by Clare on September 24, 2021
Hi there. I've had to change my general top padding for my site to zero so that my design works (a continuous yellow block on some pages - see https://youreasymove.co.nz/). I've been using a workaround for pages that don't require the continuous yellow block (like https://youreasymove.co.nz/packages-and-offers/) by turning off the title, then adding a spacer block and then adding the title a second time. This isn't ideal and I'm concerned it might not be viewed positively in terms of SEO. Can you provide some code that I can add to certain pages to add padding at the top (under my yellow header strip and before my H1 title)? Thanks.
Hi Clare,
Can you activate the original title on https://youreasymove.co.nz/packages-and-offers/, then remove the spacer block.
We can have a look then to offer some CSS solutions :)
Let me know.
Done, thanks. Actually that page doesn't duplicate the title, but you get the gist in terms of spacing issues.
Give this CSS a try:
.page-id-27 #content {
padding-top: 40px;
}You can find the page id in page editor:
https://www.screencast.com/t/8Nw1zFpoVP8z
If you want to apply to multiple pages, use ,to separate them, eg. :
.page-id-27 #content, .page-id-28 #content, .page-id-29 #content {
padding-top: 40px;
}And this for mobile in case you need smaller padding:
@media (max-width: 768px) {
.page-id-27 #content, .page-id-28 #content, .page-id-29 #content {
padding-top: 30px;
}
}Let me know if this helps :)
Thanks, Sorry Ying. I'm not very knowledgeable when it comes to this kind of thing. Can you provide instructions on where to add the code specifically. I went to edit the page in code editor mode but when I previewed it just showed the code, no space. Can you provide guidance on how and where to add the code? Thanks
Sorry I should've mentioned, you can add the CSS code at customizer > additional CSS :)
Thanks Ying, that's worked for that page, but not for this page: https://youreasymove.co.nz/2021/09/23/moving-house-checklist-guide-the-essentials/. Is it because this is a blog post and not a page? Do I need different CSS? Thanks
Hi there,
for each post or page you will need to add a specific CSS selector. The post you linked to has this class: postid-1366
To include that you would need to update Yings CSS to this:
.page-id-27 #content,
.postid-1366 #content {
padding-top: 40px;
}That's worked, thanks so much.
Glad to be of help!
