How can I make a gallery stretch the full width of the screen?

I would like to make the gallery on my home page stretch the full width of the screen, but I can't seem to find the CSS code for it.

Here is an example of what I mean: http://www.auntstella.com/

Here is my site: https://john-dangola.squarespace.com/home

Thanks in advance!

PS- I'm using Marquee template

This.

broken link, can you try again?

Nevermind, I see it now.

However, and correct me if I'm wrong, but isn't that a screenshot of the settings for an image block? I'm trying to make a photo gallery stretch the full width, not a single image. But thanks!

Add this snippet of code to the custom CSS Editor:

.homepage .content-inner { max-width: 100%; padding: 0; }

That will make your homepage always full width.

Could you guide me in the right direction on how to apply this to a simple image block? I'd like to have an image block span the entire width of the page container, but cannot figure it out!

I checked out your site and saw that you managed to figure this out. I'm trying to do the same thing. Could you possible share your CSS that made this work? I'm been working on this for a long time and I can't figure it out. Thanks in advance for the help!

Add this code to the custom CSS Editor:

.homepage .content-inner { max-width: 100%; padding: 0; }

What if you want to do this with a page that's not the homepage? Thanks!

Id like to know how to do this as well

I found turning on the auto crop for the gallery made the bedford template bleed the image to the edges.

Here's how I did it for MOBILE and ONLY on the homepage, using Avenue template... hope this helps someone!

@media only screen and (max-width: 600px) {
.homepage #canvas {
  max-width: 100% !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-top: 0px !important;
 }
}

Short answer / The easy way

Get a (commercial) plugin that does everything automatically. Here's a link to the full-width squarespace gallery blocks plugin if you're interested. No need to struggle with the code yourself.

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*/
}

If we were living 10 years ago before smartphones and our website only came in one width 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

This custom CSS does not seem to work on Adirondack on a Page with a Gallery Block. Any solutions?

Actually it works fine!

This works really well, if you want to add the plugin to a footer (like I have), simply add the script to Settings, Advanced, Code Injection and this will work across every page.

I have the Five template, and I spent a day trying to get every other solution to work before giving in and buying the plug in, SO WORTH IT! Super easy. Should have just skipped the headache and gotten the plug in to start with.

There's a very simple and free way to do this that solves for all screen sizes and devices: https://answers.squarespace.com/answers/196862/view.html

It works great in the Eamon template, but I'm unsure if it works as well in the others.

I did similar to the above but with dynamic layout (not fixed -300px)

Change 1150px to your content page width.

.sqs-block {
   width: 100vw !important;
   left: calc((100vw - 1150px) / -2) !important;
}