Jump to content

Can I add a title to a gallery section?

Recommended Posts

1 hour ago, SashaMiana said:

Site URL: https://www.sashamiana.co

I would really like to add a title to my gallery section! I've tried using the previous section above it, but the padding is too thick and it looks silly. Please help. 

Do you mean some thing like this? Can you describes more detail about your issue?

image.thumb.png.c3c062e47f794d0b43153ae9a80df75e.png

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 hours ago, SashaMiana said:

No, actually, above the scrolling logos, I'd like to put "Featured Clients"! It is a gallery reel section.

Thank you!!

 

You can try adding to Home > Design > Custom Css

section[data-section-id="616722482bd1ee7450ac2795"]::before {
  content: 'Featured Clients';
  color:#000;
  font-size: 2em;
  display:block;
  width:100%;
  height:80px;
  position: absolute;
  top:0;
  z-index:1;
  margin:auto;
  text-align:center;
  line-height: 80px
}

Support me by pressing 👍 if this useful for you

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

This is my result

image.thumb.png.2291361a4f448215f0055a590bf9bee7.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 6 months later...
9 hours ago, kennyi said:

Sorry to hijack this post - I tried the CSS script to add a title to my gallery, which worked great until I tried to resize my browser, and then the title would go to some weird position. Would you know how to fix this@bangank36 ? Thanks in advance 🙂 

Can you share your site with site-wide password?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
15 minutes ago, bangank36 said:

Can you share your site with site-wide password?

Sure, the page is https://kenny.squarespace.com/vfx (no password)

I'm experimenting with your custom CSS here - it works until the browser is resized or in mobile mode (chrome). Also, I wonder if it'd be possible to control the spacing above the title? It looks a bit tight at the moment and I can't find the parameter to change that. Thanks again 🙂

image.thumb.png.f7139e82a6f90a3b5478d9db37c9ffd1.png

Link to comment
48 minutes ago, kennyi said:

Sure, the page is https://kenny.squarespace.com/vfx (no password)

I'm experimenting with your custom CSS here - it works until the browser is resized or in mobile mode (chrome). Also, I wonder if it'd be possible to control the spacing above the title? It looks a bit tight at the moment and I can't find the parameter to change that. Thanks again 🙂

image.thumb.png.f7139e82a6f90a3b5478d9db37c9ffd1.png

Kindly replace the old code with the following one to set the title correspondingly

section[data-section-id="626127c40ce3b24fa47ef997"] .content-wrapper:before {
  content: '// selected frames';
  color:#000;
  text-align: center;
  padding: 20px 0;
  font-size: 2em;
}
section[data-section-id="626127c40ce3b24fa47ef997"] .content-wrapper {
  flex-direction: column;  
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
22 minutes ago, bangank36 said:

Kindly replace the old code with the following one to set the title correspondingly

section[data-section-id="626127c40ce3b24fa47ef997"] .content-wrapper:before {
  content: '// selected frames';
  color:#000;
  text-align: center;
  padding: 20px 0;
  font-size: 2em;
}
section[data-section-id="626127c40ce3b24fa47ef997"] .content-wrapper {
  flex-direction: column;  
}

Let me know how it works on your site

The title now stay in the same position when the browser resizes! Thanks so much 🙂

One more thing - is it possible to adjust / reduce the gap between the title and the gallery?

Thanks again!

image.thumb.png.96afb93ca91fc41be80042fe5a12c438.png

Link to comment
4 hours ago, kennyi said:

The title now stay in the same position when the browser resizes! Thanks so much 🙂

One more thing - is it possible to adjust / reduce the gap between the title and the gallery?

Thanks again!

image.thumb.png.96afb93ca91fc41be80042fe5a12c438.png

This space is cause by the adding of the gallery. You can add the following code to reduce the gap

section[data-section-id="626127c40ce3b24fa47ef997"] .gallery-grid {
  padding-top: 0;
}

And modify the padding of the title by change the padding value

https://forum.squarespace.com/topic/206307-can-i-add-a-title-to-a-gallery-section/?do=findComment&comment=544730

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, bangank36 said:

This space is cause by the adding of the gallery. You can add the following code to reduce the gap

section[data-section-id="626127c40ce3b24fa47ef997"] .gallery-grid {
  padding-top: 0;
}

And modify the padding of the title by change the padding value

https://forum.squarespace.com/topic/206307-can-i-add-a-title-to-a-gallery-section/?do=findComment&comment=544730

Works like a charm! Thanks so much for all your help!

Link to comment
2 hours ago, bangank36 said:

This space is cause by the adding of the gallery. You can add the following code to reduce the gap

section[data-section-id="626127c40ce3b24fa47ef997"] .gallery-grid {
  padding-top: 0;
}

And modify the padding of the title by change the padding value

https://forum.squarespace.com/topic/206307-can-i-add-a-title-to-a-gallery-section/?do=findComment&comment=544730

Sorry - one last question actually - how would I align the title text to the left of the gallery?

I tried changing the CSS code to "text-align: left;" , but the title then aligns to the left border of the page rather than aligning to the left of the gallery? Would it be possible to do that? Thanks again!

 

Untitled-1.jpg

Edited by kennyi
upload printscreen
Link to comment
On 4/24/2022 at 12:46 AM, kennyi said:

Sorry - one last question actually - how would I align the title text to the left of the gallery?

I tried changing the CSS code to "text-align: left;" , but the title then aligns to the left border of the page rather than aligning to the left of the gallery? Would it be possible to do that? Thanks again!

 

Untitled-1.jpg

Do you still need help?

https://kenny.squarespace.com/vfx

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
On 3/21/2023 at 1:56 AM, PronicCPT said:

Hi there,

 

Thanks for the great tips. Does this code help for the images to loop through continuously like a carousel? I am trying for that effect but not having luck yet. 

 

Thanks

Which code are you referring to?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
55 minutes ago, katrinaa said:

I'm actually trying to use the code but nothing is showing up on my page?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.