Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Moving the caption overlay from the bottom to the middle


Comfrey

Question

5 answers to this question

Recommended Posts

  • 1

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  /* caption overlay align top */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay .image-caption-wrapper {
  
    bottom : auto;
    top : 0;
    
    }
    
  </style>
  

I restricted the effect to the page section with image blocks in it. If you want the effect page-wide, remove [data-section-id="60ea0fec025aa46e30dc9295"]. If you want the effect site-wide do the above and also put the code in Design > Custom CSS minues the style tag.

Here are some alternates.

<style>

  /* caption overlay align center */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay .image-caption-wrapper {
  
    bottom : auto;
    top : 50%;
    transform : translateY( -50% );
    
    }
    
  </style>

 

<style>

  /* caption overlay on hover align top */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay-hover .image-caption-wrapper {
  
    bottom : auto;
    top : 0;
    
    }
    
  </style>

 

<style>

  /* caption overlay on hover align center */
  
  [data-section-id="60ea0fec025aa46e30dc9295"] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ).layout-caption-overlay-hover .image-caption-wrapper {
  
    bottom : auto;
    top : 50%;
    transform : translateY( -50% );
    
    }
    
  </style>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 7/15/2021 at 4:29 AM, Comfrey said:

This was fantastic. Thank you for all your help.

Hi. Do you need to help with these?

Site URL: https://saffron-butterfly-a26f.squarespace.com/

1. (Tablet/Mobile – Homepage > Footer) This line does not coincide with the bottom of the photo(Like on desktop)saffron-butterfly-a26f.squarespace.com-0

2. (Mobile – Homepage > Header) The same here

saffron-butterfly-a26f.squarespace.com-0

3. (Mobile/Tablet – Homepage) There is a scroll bar at bottom of the page

saffron-butterfly-a26f.squarespace.com-0

4. (Mobile – Footer) Want to make footer links to 2 column (like on desktop/Tablet)?

saffron-butterfly-a26f.squarespace.com-0

5. (Desktop – Product) (Quick view) Image doesn’t show in full size

https://saffron-butterfly-a26f.squarespace.com/beauty-wellness-1

saffron-butterfly-a26f.squarespace.com-0

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/28/2021 at 12:42 AM, Comfrey said:

Wow, thank you for noticing these problems (I hadn't noticed most of them). I would love help with all of those things.

Q1. Add to Design > Custom CSS

/* Footer top border */
@media screen and (max-width:767px) {
footer#footer-sections {
    padding-top: 20px !important;
    margin-top: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...