Remove white space / margin / padding around content in middle column

  • Resolved wayne7941

    (@wayne7941)


    8 years, 4 months ago

    I am using the Hueman Theme, and it’s awesome! However, I would like to remove all of the white space (padding? margin?) around the content in the center column. I am currently using the 3-column layout with main content in the center, and I would like my sliders, etc. to extend all the way to the gray background of the sidebars. Is there a way to do this? I already tried changing both the specific row’s settings and the global settings to “full width” but to no avail.

    My site is https://trisef.com

Viewing 12 replies - 1 through 12 (of 12 total)
  • Geoffrey Shilling

    (@geoffreyshilling)

    Volunteer Moderator

    I would recommend using a child theme or a plugin that allows you to add custom CSS so any changes you make will not be removed when your theme is updated.

    Try adding this CSS:

    .pad {
    padding: 0px;
}
    Thread Starter wayne7941

    (@wayne7941)

    Thanks for the prompt reply! But unfortunately, that did not work…

    Try removing the padding by inheriting the parents like below:

    #page .content .pad {
    padding: 0;
}

    Apply the above css code either in your child theme or in parent theme’s style.css and see if it’s working if not then use the following one:

    #page .content .pad {
    padding: 0px !important;
}

    The padding of the center content will be removed and the left and right whitespace of the content section will be removed.
    Hope this is what you want

    Thread Starter wayne7941

    (@wayne7941)

    Thanks, but that didn’t work either. Btw, the “#page” part of the code shows up red…am I supposed to input a value (such as the post id or something)?

    Thread Starter wayne7941

    (@wayne7941)

    I tried to look in Hueman theme’s style sheet, not sure which part(s) applies to what I need, but here are some that I thought might apply??

    Base layout:

    #wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.main { background-color: #fff!important; position: relative; }
.main-inner { position: relative; min-height: 600px; /* instead of sticky footer */ }
.content { width: 100%; position: relative; }
.pad { padding: 30px 30px 20px; }

    3-column content middle:

    .col-3cm .main { background: url(../img/sidebar/s-right-s2.png) repeat-y right 0; }
.col-3cm .main-inner { background: url(../img/sidebar/s-left.png) repeat-y left 0; padding-left: 340px; padding-right: 260px; }
.col-3cm .s1 { float: left; margin-left: -340px; }
.col-3cm .s2 { float: right; margin-right: -260px; /* ingenuity! */ position: relative; right: -100%; }
.col-3cm .content { float: right; }

    @wayne7941 –

    1. Your child theme CSS isn’t working because you’re missing two closing brackets:

    @import url("../hueman/style.css");

.sidebar .widget { padding: 30px 30px 0px; }

.widget {
    font-size: 18px;
                        <------------
.ps-widget--external {
    font-size: 18px;
                        <------------
.entry { color: black; }
.entry.excerpt { color: black; }

    2. Fix those and then add this:

    .content .pad {
    padding: 0;
}

    3. You don’t need the @import line.

    Thread Starter wayne7941

    (@wayne7941)

    @bdbrown –

    It didn’t work at first, but then I added ‘px’ to ‘0,’ and it worked! Thank you, thank you, thank you! You’re amazing.

    I don’t suppose you could tell me how to only apply it to certain pages?

    Thread Starter wayne7941

    (@wayne7941)

    What I mean is, I like having no padding on the homepage and others, but all of my WooCommerce store pages look better with the padding, and I don’t know how to edit the woocommerce pages…

    You can identify the page by looking at the <body> element classes:

    <body class=”archive tax-product_cat term-books term-18 plg-peepso woocommerce woocommerce-page col-3cm full-width topbar-enabled mobile-sidebar-hide chrome product-columns-3 s1-collapse s2-collapse” cz-shortcut-listen=”true”>

    In this case we want to apply the padding style to all pages except the store pages. The store pages are identified by the “.woocommerce-page” class so we can exclude them using the CSS “not” property (https://css-tricks.com/almanac/selectors/n/not/): 

    body:not(.woocommerce-page) .content .pad {
    padding: 0px;
}

    Also, since you’re using a child theme you don’t need the CSS plugin. Move that CSS code from the plugin to the child theme style.css file and remove the plugin.

    Thread Starter wayne7941

    (@wayne7941)

    That didn’t quite work for me, so I found a plugin that allows me to add custom code on a page-by-page basis. Thanks for all your help!

    Anonymous User 12851872

    (@anonymized-12851872)

    Hi,

    the code for the child theme

    #header .pad {
    padding-top: 2px;
    padding-bottom: 2px;
}
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Remove white space / margin / padding around content in middle column’ is closed to new replies.