WordPress.org

Ready to get started?Download WordPress

Forums

Problem with gallery/image spacing (6 posts)

  1. najel
    Member
    Posted 3 years ago #

    Hello all!
    I have a bit of a problem placing a gallery or individual images in my wp site. I have read a lot of entries in here and have gotten some ideas, but nothing has really worked so far.
    The website in question is: http://pkwedding.najel.de/?page_id=36
    I currently have two sets of images on there.
    The one on top is a gallery including three images (just the gallery that comes with WP). This would work just fine for my purposes, but as you can see, it leaves a large white space under the gallery. It does that when there is just text underneath too. I have not been able to get rid of this large gap. I found some info on changing the style.css file, but the one for my template does not have any of the gallery styles in it.
    The second set of images is individual images inserted into a table, like so:

    <table>
    <tr>
    <td>[caption id="attachment_77" align="alignnone" width="150" caption="The church"]<a rel="attachment wp-att-77" href="http://pkwedding.najel.de/?attachment_id=77" target="_blank"><img class="size-thumbnail wp-image-77 " title="The church" src="http://pkwedding.najel.de/images/DSC02881-150x150.jpg" alt="The church" width="150" height="150" /></a>[/caption]</td>
    <td>[caption id="attachment_79" align="alignnone" width="150" caption="View from the altar"]<a rel="attachment wp-att-79" href="http://pkwedding.najel.de/?attachment_id=79" target="_blank"><img class="size-thumbnail wp-image-79 " title="View from the altar" src="http://pkwedding.najel.de/images/DSC02887-150x150.jpg" alt="View from the altar" width="150" height="150" /></a>[/caption]</td>
    <td>[caption id="attachment_78" align="alignnone" width="150" caption="Inside of the Church"]<a rel="attachment wp-att-78" href="http://pkwedding.najel.de/?attachment_id=78" target="_blank"><img class="size-thumbnail wp-image-78 " title="Inside of the Church" src="http://pkwedding.najel.de/images/DSC02885-150x150.jpg" alt="Inside of the Church" width="150" height="150" /></a>[/caption]</td>
    </tr>
    </table>

    The problem here is, as you can see, that it now spaces the images farther apart than in the gallery and it now overlaps the sidebar. I would be very happy if someone could help me out with this. If someone knows how I can get the gallery to display without the whitespace, that would be my preferred option. Decreasing the spacing of the images in the table would be great, too though!

    Thanks,
    Phil

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Get rid of the table markup and just align the 3 images left. The gap is being caused by the table which is too large for your content area.

  3. najel
    Member
    Posted 3 years ago #

    Thanks, I just tried that. When I align the three images left (I have done so now below the first two sets), it will only display two in a row and set the other one below. It will also wrap the text and the map overlaps.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    Then you need to either reduce the padding around your captioned images or increase your content area. There simply isn't enough room for 3 captioned images at present.

  5. najel
    Member
    Posted 3 years ago #

    OK, I will try that. I am just confused why the gallery can fit three images next to each other, but I can't. I don't see anything in the style of the gallery that would reduce the padding, or am I blind?
    Anyway, I will play around with it a little more, thanks for your help!

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    Because individually captioned images have different CSS (style/margins/paddings). Edit style.css and change margin: 10px; to margin:10px 0; in:

    .wp-caption {
        background-color: #F5F5F5;
        border: 1px solid #DDDDDD;
        margin: 10px;
        padding-top: 4px;
        text-align: center;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic