7.1 Gallery caption -removed white space under after moving caption on to photo

With CSS i have managed to move the caption in a gallery slide show on to the photo with a tinted background ( Tick)

BUT

the gallery section retains a white panel below the image.  This creates an excessive gap to the next section.

Any one? or  @tuanphan you are a legend.

Can this be removed with further code?

Current code i have used is...

Quote

 

//-- SLIDER CAPTIONS

  .gallery-caption p{

    font-size:3.0rem!important

  }

    .gallery-caption p{

    line-height:3.2rem!important

  }

.gallery-caption p{text-align:center} 

.gallery-caption {margin-top: -12%} 

.gallery-caption {padding-top: 40px}

.gallery-caption {min-width: 100%}

.gallery-caption {background-color:rgba(255,255,255,0.8)} 

 

@media screen and (max-width:760px)

{.gallery-caption p{

    font-size:2.3rem!important

  }

.gallery-caption p{

    line-height:2.8rem!important

  }

.gallery-caption {margin-top: -50%} }

 

Can you share link to page in screenshot?

@tuanphan

purifyco.com.au

password :    PCO2020

Thanks for taking a look!

I am in Australia, hence slow reply 🙂

Add to Home > Design > Custom CSS

.homepage .gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 20px !important;
}

Thanks @tuanphan

That works perfectly!!

So just for everyone else to use... To put a caption over an image in a full bleed gallery slideshow.

Example below.

Code is below with @tuanphan sorting out the gap.

Quote

//-- SLIDER CAPTIONS
.homepage .gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 20px !important;
}

  .gallery-caption p{
    font-size:2.8rem!important
  }
    .gallery-caption p{
    line-height:3.2rem!important
  }
.gallery-caption p{text-align:center} 
.gallery-caption {margin-top: -20%} 
.gallery-caption {padding-top: 50px}

.gallery-caption {min-width: 100%}

.gallery-caption {background-color:rgba(255,255,255,0.8)} 

@media screen and (max-width:768px)
{.gallery-caption p{
    font-size:2.0rem!important
  }
.gallery-caption p{
    line-height:2.8rem!important
  }
  .gallery-caption {padding-top: 30px}
.gallery-caption {margin-top: -60%} }

Hello! I am trying to solve this same issue with the white space. All i did was create a new section with the text and overlap it onto the slide show - so that way the text stays static and the image appear to slide beneath it. BUT now I have the white space. I cannot seem to force the height of the section. Thoughts" 

https://corn-apricot-zn88.squarespace.com/

PW BA47

12 hours ago, deaton72 said:

Hello! I am trying to solve this same issue with the white space. All i did was create a new section with the text and overlap it onto the slide show - so that way the text stays static and the image appear to slide beneath it. BUT now I have the white space. I cannot seem to force the height of the section. Thoughts" 

https://corn-apricot-zn88.squarespace.com/

 

PW BA47

 

Do you use Personal or Business Plan?

business. I have removed all the bottom padding and margin, but there is still a small sliver of white. 

9 hours ago, deaton72 said:

business. I have removed all the bottom padding and margin, but there is still a small sliver of white. 

 

First, Remove the text section & add this to last line in Code Injection Footer

<script>
  jQuery(document).ready(function($) {
	$('<h2 class="t-text">Fostering Healthy Communities   Through Learning and Design</h2>').insertBefore('.homepage .gallery-fullscreen-slideshow-list');
});
</script>

Next, disable autoplay & let us know. We will keep checking to move title over slide.