• Registered: 2017-09-12
  • Posts: 8

Topic: Gap between text and carousel

Hello,

We are trying to reduce the gap between the carousel and the copy directly above it on this page, but I've reduced everything I can see in Juicebox. Is there anything else I can try?

http://www.sheddaquarium.org/phops

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Gap between text and carousel

Please see this FAQ which should hopefully help.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

If the aspect ratio of the gallery's image area does not match that of the images (and it might not if your gallery is responsive and it's shape changes depending on the dimensions of the user's browser viewport), then the images may be scaled as large as possible within the available space but there may be space at the top and bottom (or left and right) of the images.

The easiest solution may be to set your gallery's height to a fixed value (and trial and error might be required to settle on the optimal value).

It might also be an idea to set a non-white background color (at least for testing purposes) so that you know exactly where the gallery boundaries are and what whitespace can be attributed to the gallery and/or the web page itself.

I hope this helps.

3 Reply by SheddAquarium (edited by SheddAquarium 2017-11-02 16:17:50)

  • Registered: 2017-09-12
  • Posts: 8

Re: Gap between text and carousel

Hi Steven,

I'm trying this fix with a different carousel in the application (not published yet), but when I change the height to the width that the photos are, it severely reduces the quality of the photos for some reason. Do you know why that would be?

Thanks!

  • Registered: 2017-09-12
  • Posts: 8

Re: Gap between text and carousel

It looks like making the height 400px when the photos are 300px high seemed to retain image quality. I'm still seeing quite the gap on our page:

https://www.sheddaquarium.org/plan-a-vi … he-fishes/

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Gap between text and carousel

I notice you use a galleryHeight of 50%.
This suggests that the gallery's actual height should be only 50% of the height of its parent container (and this would likely result in unwanted space).

Also, when using a percentage height, you'll need to make sure that all the gallery's parent containers have heights assigned via CSS, otherwise the browser may not be able to determine what the gallery's actual height should be. (The browser needs to know what the gallery's height should be 50% of.)

Additionally, you might need to take into account this note regarding Using Percentage Heights.

You might like to try setting your galleryHeight to 100% (so that you know that the gallery will always fill the height of its parent container) and then adjust the height of your gallery's parent container(s) as necessary.

Otherwise, to avoid the potential problems associated with using a percentage height, I'd recommend setting your galleryHeight to a fixed pixel value (such as 600px).
In doing so, you will have total control over the height of your gallery (you always know how high it will be), and being that your web page has a lot of vertical scrolling content, your gallery would not benefit from being responsive in the vertical dimension.
At the moment, the height of your gallery (and the amount of space above and below the main images) changes depending on the height of the browser window. I expect you probably do not want this to happen and a fixed height gallery would be the solution. (A vertically responsive gallery would really only be useful if your web page's content filled the browser window without any vertical scrollbars.)

Try using something like the following (adjusting it if necessary) and hopefully you'll be able to reduce the space surrounding your images.

galleryHeight: "600",