WordPress.org

Ready to get started?Download WordPress

Forums

Removing padding on homepage via child theme (15 posts)

  1. adminforum87
    Member
    Posted 1 year ago #

    Hi guys,

    Very easy question...

    Based on this screenshot:

    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!

  2. adminforum87
    Member
    Posted 1 year ago #

    Argh, I can't link this image....

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I can't link this image..

    to post a link, write a work, highlight it, and then add the link.

    formatting questions without a live link to the problem are virtually impossible to answer;
    also helping with general formatting is outside the main scope of this forum.

  5. adminforum87
    Member
    Posted 1 year ago #

    Hi guys, It appears the link worked anyway. It was just how it displayed on my computer...so it should be displayed above.

    I wasn't aware I couldn't post this sort of question here. I got one answered the other day along the same lines and no one mentioned it.

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I wasn't aware I couldn't post this sort of question here.

    you can ask those questions - however, the chance to get an answer is not as high as it might be in a css forum.

    you can also work with a browser inspection tool (I use Firefox' web developer add-on; some modern browsers have the 'inspect element' function...) to find out where the padding comes from.

    can you post a live link?

    from the screenshot, I cannot even see if the margin/padding belongs to the screenshot image, or any slideshow, nor that there is a slideshow in the site ...

  7. adminforum87
    Member
    Posted 1 year ago #

    Oh clever! It may be worth changing my browser for that!

    Well, I wasn't activated. I was just making mods to my child and then previewing. So I made it live...

    http://dnaproductionsuk.com/

    Now it's changed the theme completely! When I preview it shows me what you can see from the screenshot. However now I've activated it it's removed my banner, changed the picture and apparently wiped my background image too. I was under the assumption that child themes work from the parent and change anything mentioned in the child theme but aside of this, will keep everything the same as per the parent theme.

    Do I have this wrong?

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    switching to a child theme is like switching themes - you will need to set any custom headers, backgrounds, or menus again.

    one problem is that your slideshow is not responsive (flexible in width) so in a 2000px wide site, there will always be some empty space left and right.

    anyway, to start with removing the padding and margins from the main content area, try to add these styles:

    .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; }

    the last style is to center the slideshow.

    there might be more minor styles that need adjusting.

  9. adminforum87
    Member
    Posted 1 year ago #

    thanks so much for this, I'm going to start editing now and see if it works. can I ask, where it says page.singular, does this mean that this will only apply to the one page? What is the equivalent if I want these padding settings across all pages?

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    this will only apply to the one page?

    this means it will apply to all static pages;

    for just the one page, replace .page with .page-id-4
    or
    for just the home page, replace .page with .home

  11. adminforum87
    Member
    Posted 1 year ago #

    Ok great.

    I just tried it and it hasn't made an effect.. here's the code I now have in my child style.css:

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

    .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; }

    body {
    padding: 0 0;
    }
    #page {
    margin: 0;
    max-width: 2000px;
    }

    Have I been an idiot and put it in the wrong place?

  12. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    all is fine - your browser cache is just holding on to old styles;

    clear the browser cache by pressing 'ctrl f5' or 'reoload' the web page (a few times).

    the main large space above the slider can be reduced with:

    .page.singular .hentry { padding-top: 0; }

    and then there is also the empty page title etc.

  13. adminforum87
    Member
    Posted 1 year ago #

    AH!!!! That would also explain why some other changes didn't pop up before..

    Great stuff, my left and right margins are completely wide open, thank you!

    The vertical gap between slideshow and menu bar is still there however, should this work?

    .page.singular #content{ height:100% ;margin: 0; }

    Thanks so much for your help on this, I'm so close!

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    should this work?

    not likely -

    unfortunately, there are quite a few margins, paddings, elements, etc between the nav bar ans the slideshow - one of them I mentined in my second last reply.

    keep persisting with the browser inspection tools, and also look into the html of the page in your browser; this might give you further ideas where to reduce margins or what elements to hide with 'display: none;' in the corresponding styles.

  15. adminforum87
    Member
    Posted 1 year ago #

    Sorry, it appears my computer didn't refresh the second half of that post..

    The height has now halved so I'm assuming a few little tweaks like you just mentioned should decrease it even more. Although it seems natural the way it looks now.

    Thanks so much!!

Topic Closed

This topic has been closed to new replies.

About this Topic