[Support request] Add padding to top of certain pages (general site padding needs to be turned off

Home Forums Support [Support request] Add padding to top of certain pages (general site padding needs to be turned off

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 1 month ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1942041
    Clare

    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.

    #1942124
    Ying
    Staff
    Customer Support

    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.

    #1942127
    Clare

    Done, thanks. Actually that page doesn’t duplicate the title, but you get the gist in terms of spacing issues.

    #1942157
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1942162
    Clare

    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

    #1942737
    Ying
    Staff
    Customer Support

    Sorry I should’ve mentioned, you can add the CSS code at customizer > additional CSS πŸ™‚

    #1942897
    Clare

    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

    #1942917
    David
    Staff
    Customer Support

    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;
    }
    #1942919
    Clare

    That’s worked, thanks so much.

    #1943096
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.