CSS/padding on specific pages

  • Resolved samovaari

    (@samovaari)


    3 years, 3 months ago

    Hi, we are trying to make sure the homepage is full width but the sub pages like Terms & Conditions, FAQ, Woocommerce pages like Cart and Checkout etc have some padding, because the text is touching the sides of the screens and is difficult to read on these pages. To make it a bit more complicated even, the project page needs to be full width as well so we would need to exclude this from having padding as well as the homepage.

    Tried in multiple different ways, most recently with this but it affected everything including the footer and we’re not sure how to start excluding other pages from this rule.

    .site-main .wrapper {
    padding: 40px 40px;
    }

    Any ideas how to go about this?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Muhammad Jawad Abbasi

    (@jawad1234)

    3 years, 3 months ago

    Open any page for example this one https://staging.orballo.eu/faq/ then press Ctrl+U and find page-id please see in the screenshot https://ibb.co/0BNjc4f

    then copy “page-id-39” then go Appearance->Customize->Additional CSS option then paste “page-id-39” and then you will enter “#main”

    .page-id-39 #main{
    padding: 40px 40px;
    }

    so now your FAQ page padding implement it so for other pages simply you open the page and search that like in screenshot https://ibb.co/0BNjc4f

    copy and paste on Additional CSS just you will add #main

    For Multiple pages code apply like that

    .page-id-39 #main, .page-id-41 #main{
    padding: 40px 40px;
    }

    Muhammad Jawad Abbasi

    (@jawad1234)

    3 years, 3 months ago

    if that not work then padding put like that padding: 40px 40px !important;

    George Appiah

    (@gappiah)

    3 years, 3 months ago

    I hope both of you don’t mind me chiming in 😀

    While Muhammad’s suggestion should work in principle, I don’t consider it a practical solution. That’s because you’ll have to add the ID of every single page (and post) you create to your CSS, and this will very quickly become untenable.

    If you’re sure you want to apply this padding to ALL pages except the homepage alone (or a handful of pages), then use the following instead… so you don’t have to track down the IDs of all future.

    #main {
    padding: 40px;
}
.home #main {
    padding: 0;
}

    The first part adds the padding of 40px everywhere, while the second part removes this padding for the homepage only. Note that since your desired padding is 40px for all sides, I’ve used the CSS shorthand to combine the 40px 40px to a single 40px.

    Good luck!

    Muhammad Jawad Abbasi

    (@jawad1234)

    3 years, 3 months ago

    @gappiah you are right, thank you

    Thread Starter samovaari

    (@samovaari)

    3 years, 3 months ago

    Thank you @jawad1234 and @gappiah for your input! Worked like a charm!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS/padding on specific pages’ is closed to new replies.