WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] wp-caption mis-aligns on full-width images (17 posts)

  1. Johnny Bravo
    Member
    Posted 1 year ago #

    hi guys, happy new year to you all

    the extra pixels the wp-caption border inserts mis-aligns my full width images and squeezes the gap between my content and sidebar because of its additional border around the image

    im wanting to remove (padding=0?) both the left and right borders of wp-caption so my full width images align on the left side perfectly, leaving the space between my image and sidebar as normal. this would leave me with the top border and the bottom where the caption text is.

    i've tried playing around with the css and i can get the left to 0px, but the right-side remains as is.

    you can see the problem here with the 'Happy New Year 2013' image in the middle of the post.

    http://www.artbyherbie.com/4363/nye-2013-happy-new-year-from-herbie/

    thanks.

  2. Johnny Bravo
    Member
    Posted 1 year ago #

    ...or can I edit my large / full-width image to re-size to 430px and not 440px in width, that would be a solution without having to edit wp-caption? its a small number of pixels that are causing this mis-alignment and i don't want to remove wp-caption.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Looks like maybe the padding you want to remove is here:

    .wp-caption img {
        border: 0 none;
        margin: 0;
        padding: 0 5px;
    }

    (But I'm not exactly sure what the issue is -- the spacing and alignment look okay in Firefox -- but I could be missing something!)

  4. Johnny Bravo
    Member
    Posted 1 year ago #

    hi wpyogi, i just want to remove the left and right borders on the wp-caption box, leaving me with the top and bottom spaces where the caption text is - so i want the wp-caption box to be as wide as the image itself

    so both 5px extra space on left and right of the image to 0

  5. Johnny Bravo
    Member
    Posted 1 year ago #

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    the above code removes the left side, but the right side is now doubled up to 10px

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, see if this will work -- add the width to this:

    .wp-caption {
        background-color: #DED5FA;
        border: 1px solid #9400D3;
        border-radius: 3px 3px 3px 3px;
        margin: 0 15px 9px 0;
        padding-top: 4px;
        text-align: center;
        width: 440px !important;
    }
  7. Johnny Bravo
    Member
    Posted 1 year ago #

    that would change the width on ALL inserted images, small, medium and large, this is particularly for large images, so i figured just editing the qp-caption box to get rid of left and right padding would be OK for all my images.

  8. Johnny Bravo
    Member
    Posted 1 year ago #

    .wp-caption {
        background-color: #DED5FA;
        border: 1px solid #9400D3;
        border-radius: 3px 3px 3px 3px;
        margin: 0 15px 9px 0;
        padding-top: 4px;
        text-align: center;
        width: 440px !important;
    }

    as i thought, this doesnt work and generically alters all other images of all sizes, if you refresh now you will see i have got the left border like i want it, the right has therefore doubled up

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Given your existing code, I don't know a way to only target large ones (i.e. there is not a separate class for large ones). Where did your theme come from?

  10. Johnny Bravo
    Member
    Posted 1 year ago #

    wpyogi, we are on the right track here as the css is where the solution is, this will target ALL sizes every time wp-caption is applied, its just this particular image is a large one and if this fits perfectly, all smaller ones will also

  11. Johnny Bravo
    Member
    Posted 1 year ago #

    it's something in here:

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
    .wp-caption {
    border: 1px solid #9400d3;
    text-align: center;
    background-color: #ded5fa;
    padding-top: 4px;
    margin: 0px 15px 9px 0px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    
    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }
  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'm not sure - the problematic width is really the inline css for the element:

    <div id="attachment_4366" class="wp-caption alignleft" style="width: 450px">
  13. Johnny Bravo
    Member
    Posted 1 year ago #

    that's a function call then, right? that's making the wp-caption box 10px bigger than the large image size 440px, so if we could change wp-caption to re-size the large images at 430px, that would work too

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's making the div which contains the image and the caption 450px wide. You'll have to look for where that is set.

  15. Johnny Bravo
    Member
    Posted 1 year ago #

    STOP PRESS! i've sorted it and it was even easier than i thought.

    i went to Settings> Media> and changed the 'Large' image size width to 430px. now it aligns perfectly and wp-caption can still add it's extra 5px on top, left and right LOL

    thanks, if you refresh you will see what i mean

    i feel so dumb...

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    OMG, well glad you got it -- LOL! Nothing like taking the long route to the solution - ha ha!

  17. Johnny Bravo
    Member
    Posted 1 year ago #

    such is life, at least there was no function/template editing and it's a future-proof solution, thanks for your help :)

Topic Closed

This topic has been closed to new replies.

About this Topic