Whitespace bellow WordPress inline gallery

  • shaki

    (@shaki)


    10 years, 10 months ago

    Hello. I have set an inline gallery (just shows first image) but there is a huge white space bellow the gallery image.

    It seems like WP is creating that space after a certain amount of images.

    <small> click to see more images </small>
[gallery link="file" columns="1" size="large" ids="2064,2065,2066,2067,2068,2069,2070,2071,2072,2073,2074,2075,2076,2077,2078"]

    If I keep this thing with just 4 images, it’s ok. But as sson as I add more 10 or so images, it goes creating that huge white space bellow.

    Any idea?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Pioneer Web Design

    (@swansonphotos)

    10 years, 10 months ago

    Can you link us to the issue with the 10 images?

    Without seeing the site, I can only surmise based on seeing such before, typically related to theme CSS and image sizes:

    The container that the images are in is sized vertically to fit the tallest image. When you view that image in your gallery (the tallest one) is there not a white space?

    How to fix: make all the images the same height?

    Chad

    (@lynneandchad)

    10 years, 10 months ago

    can you post a link?

    Thread Starter shaki

    (@shaki)

    10 years, 10 months ago

    Thanks guys.

    Heres a link: santalabs dot ninja/bar-restaurante/

    All images have “same” size.

    Pioneer Web Design

    (@swansonphotos)

    10 years, 10 months ago

    The div the gallery is in (the container) does not have a set height, so it takes the height from within. While your CSS is controlling the width of the images, it is not controlling the height of this container. The height is not adjusted anywhere, so it has a height of ~683px.

    Adding a max fixed height removes the white space.

    #gallery-1 {
   max-height: 1px !important; //yup 1px
}
    Chad

    (@lynneandchad)

    10 years, 10 months ago

    First off… I think I need to get myself a ‘.ninja’ domain name.

    Just because.

    Second: it’s not the images that are causing the problem, it’s the <br>‘s that are being used as clearing elements.

    Using a div instead would probably solve the problem.

    Thread Starter shaki

    (@shaki)

    10 years, 10 months ago

    😉 ninja are less expensive for testing stuff 🙂

    Thread Starter shaki

    (@shaki)

    10 years, 10 months ago

    Let me just add this bit of info, that seems to be working so far:

    .gallery br {
display:none;
}

.gallery:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
    Thread Starter shaki

    (@shaki)

    10 years, 10 months ago

    Now it just shows a small image in IE… 🙁 Both Chrome and Firefox work well.

    Is there a CSS hack for IE?

    Chad

    (@lynneandchad)

    10 years, 10 months ago

    Oh, IE… how much fun you are…

    I don’t see what’s causing the issue in that browser, but then that’s usually the problem 😉

    If you go back to your original CSS, does IE show the image properly? Trying to figure out if its related to your new styles or if its a separate issue.

    Thread Starter shaki

    (@shaki)

    10 years, 10 months ago

    Been deleting/testing pieces of CSS and I think this is the bit confusing IE:

    .gallery-item:first-child {
	display: block;
	margin: 0px 0px;
	padding: 0px 0px;
}

    In FF and Chrome it displays the first image fine, natural size (resized to browser window). But for some reason IE opens it fine, and a split second later it resizes to “small”, and left aligned.

    Maybe adding width/height can help?

    Chad

    (@lynneandchad)

    10 years, 10 months ago

    For some reason IE is ignoring this style block:

    <style type='text/css'>
			#gallery-1 {
				margin: auto;
			}
			#gallery-1 .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: 100%;
			}
			#gallery-1 img {
				border: 2px solid #cfcfcf;
			}
			#gallery-1 .gallery-caption {
				margin-left: 0;
			}
			/* see gallery_shortcode() in wp-includes/media.php */
		</style>

    which loads just before your gallery. Those styles are what create the larger image (100% of the containing element).

    When ignoring that value, IE reverts back to line 54 of your style.css:

    #gallery-1 .gallery-item {
    float: left;
    margin-top: 0px!important;
    text-align: center;
    width: 33%;
}

    As for why ID does this, I have no idea. I’ve never liked that browser 😛

    You could modify that style in your stylesheet, unless you have need of smaller thumbnails elsewhere on your site.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Whitespace bellow WordPress inline gallery’ is closed to new replies.