Jump to content

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

Go to solution Solved by abicon,

Recommended Posts

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%} }

 

 

 

purify_slider.jpg

Link to comment

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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%} }

 

purifycaptions.jpg

Link to comment
  • 3 months later...

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

 

Edited by deaton72
Link to comment
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.