To insert code use <code>...</code>.
Remove Vertical Spaces between Images in post
  • Vote Up0Vote Down jonmphotographyjonmphotography
    I am a photographer, so i post my weddings in a series of images. I created them in photoshop and sliced them so they can be uploaded easier. I would like them to be displayed without gaps between them.

    Here is the page:
    http://blog.jonmphotography.com/?page_id=309&preview=true&preview_id=309&preview_nonce=2b3dcc736b

    Here is the code: (i added a space after the < for both the a href= and img class= so it would not display the image)

    < a href="http://blog.jonmphotography.com/?attachment_id=297" rel="attachment wp-att-297">< img class="alignnone size-full wp-image-297" title="wedding-photography-sarah-brandon_02" src="http://blog.jonmphotography.com/wp-content/uploads/2012/01/wedding-photography-sarah-brandon_02.jpg" alt=" width="600" height="169" />< a href="http://blog.jonmphotography.com/?attachment_id=298" rel="attachment wp-att-298">< img class="alignnone size-full wp-image-298" title="wedding-photography-sarah-brandon_03" src="http://blog.jonmphotography.com/wp-content/uploads/2012/01/wedding-photography-sarah-brandon_03.jpg" alt=" width="600" height="357" />

     

    Here is the image, in case you have trouble see it, the space is directly above the picture below the title.

    width=width=

     

    PLEASE HELP. This is all that is holding me up at the moment.

    Thanks,
    Jon
  • 12 Comments sorted by
  • Vote Up0Vote Down WebsysWebsys
    HI

    I attached an image with a markup - you want to remove the padding between the images, correct?

    I will take a look, and see if we can come back with the code. Default wp behavior may make it difficult to eliminate the space, even if we set the image frame padding to zero. I or Kappy should reply to you tomorrow.

    Best Regards
    Websys Team
    James
    Remove Vertical Spaces between Images in post.jpg
    873 x 141 - 36K
  • Vote Up0Vote Down jonmphotographyjonmphotography
    Thank you, I look forward to seeing your solution.
  • Vote Up0Vote Down morgancreativemorgancreative
    Try this in your custom css:

    img.aligncenter, .wp-caption.aligncenter {
    margin: 0px auto !important;
    }
  • Vote Up0Vote Down morgancreativemorgancreative
    well... this did work, but for some reason it no longer does.
  • Vote Up0Vote Down morgancreativemorgancreative
    actually, now it does... i just forgot to turn off css optimizer beforehand. note that the above is for centered images, and you can set same for img.alignright and img.alignleft
  • Vote Up0Vote Down jonmphotographyjonmphotography
    i inserted this text onto the general page in the custom css field. i even did it three times with the alignright, alignleft. it is not working. i see on the last note you said you had to turn off the css optimizer, i cannot find this option.
  • Vote Up0Vote Down jonmphotographyjonmphotography
    oh, thank you for helping me out.
  • Vote Up0Vote Down jonmphotographyjonmphotography
    well i did find it in the advanced and it is already off. im confused to why it is not working since it is already off
  • Vote Up0Vote Down jonmphotographyjonmphotography
    here is the code i have entered in the custom css field. I already have code to remove the shadows. Let me know if i need it in a certain order.

    img.aligncenter, .wp-caption.aligncenter {
    margin: 0px auto !important;
    }

    img.alignleft, .wp-caption.alignleft {
    margin: 0px auto !important;
    }

    img.alignright, .wp-caption.alignright {
    margin: 0px auto !important;
    }

    #feature .top_shadow {
    background: none repeat scroll 0 0 transparent;
    border-top: 0px solid #6c6c6c;
    height: 0px;
    margin: auto;
    width: 960px;
    }

    #feature .bottom_shadow {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 0px solid #6c6c6c;
    height: 0px;
    margin: auto;
    width: 960px;
    }

    #page {
    background: none repeat scroll 0 0 transparent;
    }

    #page_bottom {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 1px solid #ffffff;
    height: 0px;
    margin: auto;
    width: 960px;
    }

    #footer_shadow {
    display: none;
    }

    img.aligncenter, .wp-caption.aligncenter {
    margin: 0px auto !important;
    }
  • Vote Up0Vote Down morgancreativemorgancreative
    I see that you have img.aligncenter noted twice, but I just checked out your page and it looks fine with no spaces...
  • Vote Up0Vote Down morgancreativemorgancreative
    Oh... I just noticed it above the photo. Hmmmm... I removed the auto, try that. Also, check your images in the html side of your page and make sure you have no

    tags bookending your images.

    You can also simplifiy your custom css as so:

    img.aligncenter, .wp-caption.aligncenter, img.alignleft, .wp-caption.alignleft, img.alignright, .wp-caption.alignright {
    margin: 0px !important;
    }

    #feature .top_shadow, #feature .bottom_shadow, #page, #page_bottom {
    background: none
    }

    #footer_shadow {
    display: none;
    }

  • Vote Up0Vote Down jonmphotographyjonmphotography
    i used your new code and still staying the same. im confused why its working for you and not for me. here is the html that is on the page. i added a space behind the < so it would display the text.

    < img src="http://blog.jonmphotography.com/wp-content/uploads/2012/01/wedding-photography-sarah-brandon_02.jpg" alt="" title="wedding-photography-sarah-brandon_02" width="600" height="169" class="alignnone size-full wp-image-297" />< img src="http://blog.jonmphotography.com/wp-content/uploads/2012/01/wedding-photography-sarah-brandon_03.jpg" alt="" title="wedding-photography-sarah-brandon_03" width="600" height="357" class="alignnone size-full wp-image-298" />
Add a Comment