Home › Forums › Support › Add padding to top of certain pages (general site padding needs to be turned off
- This topic has 9 replies, 3 voices, and was last updated 2 years, 6 months ago by David.
-
AuthorPosts
-
September 24, 2021 at 3:46 pm #1942041Clare
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.
September 24, 2021 at 6:47 pm #1942124YingStaffCustomer SupportHi 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.
September 24, 2021 at 6:58 pm #1942127ClareDone, thanks. Actually that page doesn’t duplicate the title, but you get the gist in terms of spacing issues.
September 24, 2021 at 9:04 pm #1942157YingStaffCustomer SupportGive 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/8Nw1zFpoVP8zIf 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 π
September 24, 2021 at 9:20 pm #1942162ClareThanks, 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
September 25, 2021 at 10:07 am #1942737YingStaffCustomer SupportSorry I should’ve mentioned, you can add the CSS code at customizer > additional CSS π
September 25, 2021 at 4:05 pm #1942897ClareThanks 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
September 25, 2021 at 5:05 pm #1942917DavidStaffCustomer SupportHi 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; }
September 25, 2021 at 5:12 pm #1942919ClareThat’s worked, thanks so much.
September 26, 2021 at 3:45 am #1943096DavidStaffCustomer SupportGlad to be of help!
-
AuthorPosts
- You must be logged in to reply to this topic.