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

Create full-bleed galleries?

Recommended Posts

Is it possible to make galleries full bleed on templates that don't have full bleed galleries? This has been asked a few times, but no answers.

Thank you for any help.

Edited by edokken

Share this post


Link to post

I have just figured this out using the following:


 #slideshow {
 min-height: 100%;
 width: 100% !important;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

Edited by Chloe

Share this post


Link to post

Hi Diya, sure. When previewing your site, click the paint brush to go to the style editor. Down the bottom of the style editor, click on the "Custom CSS" button. A new window will pop up, copy and paste the above code into it.

Share this post


Link to post

Thanks Chloe, I actually tried but there was no effect to the gallery at all. It just remained the same. I am using Pacific theme, there is not much information available to play around with css here and this ques has been asked several times. So I have got a gallery (slideshow) which I want to display full screen, and I added this CSS you posted to the css editor. Is there anything I am missing? Thanks very much

Share this post


Link to post

This code will make the gallery fixed to the browser even if visitor scrolls which probably isn't something Chloe or others want to do. Elements that are positioned fixed or absolute also disappear from the page flow so other elements will be hidden behind the gallery. If you want the gallery to stay where it was but still be full-width you can use this plugin.


I'm a professional Squarespace developer / designer. I design sites and help folks with problems big and small. Available for freelancer work at [petripottonen.com][1] [1]: http://petripottonen.com

Share this post


Link to post

That's not accurate. Pure CSS will indeed do it. All you have to do is span the Gallery Block to browser width. The CSS required is no more than 5 lines.


  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post

This is indeed possible on any template regardless of what some users below are saying. Please clarify whether you need a Gallery Block full-bleed, or a Gallery Collection, and I'll provide the code. Gallery Block is my recommended choice and all that's required to make that full bleed is a few lines of CSS, and selecting a few options in the block.


  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post

Short answer / The easy way

Get a (commercial) plugin that does everything automatically. Here's a link to the full-bleed gallery blocks plugin for squarespace if you're interested.

Long answer / DIY

Following example only works on one screensize


.sqs-gallery-container{
 width:100vw !important;
 position: relative;
 left: -300px;  /*Change the 300px depending on your template*/
}

Long ago before smartphones our websites only came in one width and we could just use the code above.

The code makes the gallery full-width of the browser instead of using the width of any element on the page. The rest moves the gallery to the start from the left edge of the page.

Unfortunately the code above indeed only works for one screensize so you will need a combination of CSS and quite complex javascript that calculates the margins so it works on every template and regardless of what kind of custom CSS you're using. It must also take care of cross-browser issues and do new calculations if user resizes their browser. I've explained the logic

Edited by voxpopagency
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...