Grow your CSS skills. Land your dream job.

Removing padding on homepage via child theme

  • # January 21, 2013 at 7:24 am

    Very easy question…

    Based on the screenshot:

    How do I remove the padding around the image slideshow plug in? Above and either side are most important to me but knowing how to eradicate all would be useful.

    I was hoping of some padding section in the body area of the code where you specify four numbers representing each side of the body padding. Have yet to find this though.

    So you know, yes I am working in a child theme and so far my style.css code looks like this:

    @charset “UTF-8″;
    /*
    Theme Name: TwentyEleven Child
    Desciption: Child Theme for the Twenty Eleven Theme
    Author: Douglas Fayers
    Template: twentyeleven
    */

    @import url(“../twentyeleven/style.css”);

    body {
    padding: 0 0;
    }
    #page {
    margin: 0;
    max-width: 2000px;
    }
    Any help greatly appreciated, thanks!

    # January 21, 2013 at 7:29 am

    We’re probably going to need to see a link to the site.

    BTW…fixed your code quoting & img link.

    # January 21, 2013 at 7:32 am

    Thanks!

    Here’s a link…

    http://dnaproductionsuk.com/

    I wasn’t actually activated. I was editing the child theme code and previewing before I activated it, taking the place of Twenty Eleven. Now it’s changed the whole layout! WHat the image shows is what preview showed me, and what it looks like now is what happened when I activated. Any ideas?

    # January 21, 2013 at 7:37 am

    I’m no expert on WP (or even a novice actually) but just looking at the classes attached to the page would seem to indicate there is something fundamentally wrong with the template(s).

    class=”home page page-id-4 page-parent page-template-default single-author singular **two-column right-sidebar**

    # January 21, 2013 at 7:38 am

    There is, that’s for certain! I just don’t know what…

    # January 21, 2013 at 7:44 am

    Insofar as there is very little in your child theme CSS, I would suggest turning it off and seeing if the layout returns to normal.

    If it does then you have at least identified the source of the problem.

    I’m also wondering if the @import is even working right.

    # January 21, 2013 at 7:57 am

    Yes, when I reactivate Twenty Eleven the layout returns to normal. Do I need to copy and paste all relevant code from the parent to the child then?

    What would you suggest with the @import?

    # January 21, 2013 at 8:04 am

    As I said, I’m no WP expert.

    I don’t know specifically what the child theme is doing to WP. My initial suggestion is to delete all the ‘new’ styles from the child style sheet and leave just the import statement.

    If everything works when you have done that, start adding back the new styles one at a time until it breaks.

    # January 21, 2013 at 8:28 am

    Just having a really quick look through the rules on the site, there is a TONNE of additional padding being pulled from the original CSS file… a lot of it duplicated.
    Give me a half hour or so, and I’ll see if I can duplicate what’s going on, and then I might be able to point you in the right direction :P

    For starters though, change the margin rule on #page to “0 auto”. The “0px” you have there means that anyone on a 27″ iMac sees the entire site sitting on the left, and the small OCD part of me is going insane :)

    # January 21, 2013 at 8:37 am

    Haha! Ok I’ll do that now, any insight you can give is appreciated.

    # January 21, 2013 at 8:50 am

    First, change your child style.css code to this:

    @charset “UTF-8″;
    /*
    Theme Name: TwentyEleven Child
    Desciption: Child Theme for the Twenty Eleven Theme
    Author: Douglas Fayers
    Template: twentyeleven
    */

    @import url(“../twentyeleven/style.css”);

    body {

    }

    #page {
    width: 90%;
    max-width: 1280px;
    }

    After playing with it for a while now, I’ve decided that I hate the plugin you’re using :) If you were happy enough to modify some php slightly, I could run you through how I would change it. Otherwise, someone with past experience with that plugin may be of more use.

    # January 21, 2013 at 8:51 am

    How are you putting the slideshow in the page? Widget, shortcode, …?

    # January 21, 2013 at 10:59 am

    I just solved this problem! Argh, it took the best part of a day but it’s done. I pasted this at the beginning of the style sheet if anyone is interested.

    .page.singular .hentry { padding-top: 0; }
    .page.singular #content{ width:100% ;margin: 0;}
    .page.singular .entry-header, .page.singular .entry-content, .page.singular footer.entry-meta, .page.singular #comments-title
    { width: 100%; }
    .entry-content #leftsample { margin-left: auto; margin-right: auto; }

    # January 21, 2013 at 11:09 am

    Fair enough.

    I hope that solution works in the future as you add more content though.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".