Remove Padding Pages and Posts Woothemes Canvas

Hello, I would like to remove the padding on individual pages and posts within my site. One of the pages that is an example is listed below.

Basically, I want no margins, padding on the content.

I have granted access for WPMU if you want to check it out.. I am also not sure as to what is going on with the text going outside of the boxed layout either. I am going to inquire with them though y'all are usually a bit quicker and more responsive.

Thanks again!

Mandy

  • Michael Bissett

    Hey @Mandy, hope you're doing well today. :slight_smile:

    As for the content overflow problem, that's due to the "width" property in the piece of code you have here:

    <div style="background-image: url('http://digitalreachopm.com/wp-content/uploads/2014/06/Our-Mission-Image.jpg'); background-repeat: no-repeat; height: 700px; width: 1140px; margin-top: 0px; padding: 0px 0px 0px 0px;">

    Removing the width property solved the problem.

    As for removing the padding on the page, while that's possible, please bear in mind that it'll affect ALL content on the page, not just the <div> that I referenced earlier.

    Using the page you referenced earlier, here's the code you'd use:

    .page-id-17 #content {
    padding-left: 0;
    padding-right: 0;
    }

    You can insert CSS code like that into a plugin like this:

    https://wordpress.org/plugins/simple-custom-css/

    Let me know if you need anything else here. :slight_smile:

    Regards,
    Michael

  • Mandy

    Thank you for the code and it worked well.

    I am still facing a couple of issues.

    #1. When I take away the padding on pages, some of the shortcodes have issues with the formatting and the information begins to spill over beyond the width of the site.

    #2. What do I do if I only want one element of the page to be without padding and I want the padding for other portions of it? For example, on this page:

    http://digitalreachopm.com/bottom-line-by-the-hour-service-or-project/#Accordion-3

    I want the slider at the top, which is inserted with smart slider 2, to be the full width of the space. Below, where the toggled/accordion content is, I would like to have the padding that is set for the theme. I tried a <div> with the style in it and I tried a <div> with the style in a <p> and still no solution.

    Thank you for your time and attention to this, the support is appreciated. Have a great day!

  • Ash

    Hi @Mandy

    I hope you are well today.

    #1: Would you please post a link of your problem and a screenshot marking the point?

    #2: Please try the following css:

    #content{
    padding: 0 !important;
    }
    .nextend-slider-fadeload{
    width: 100% !important;
    }
    .su-accordion{
    margin: 0 20px;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS

    Let me know if it works.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.