Stretch gallery blocks to full-width of browser

I am trying to create a homepage that displays my portfolio. I don't want to create a gallery page, because I want all of my portfolio on the one page, divided amongst three slider gallery blocks.

How can I get these slider gallery blocks to stretch out to the entire width of every browser the page is viewed in ?

I'm not sure if this makes any difference but my current template is Beatrice.

For an example of what I am trying to achieve, take a look at a page I created in Wix that gives the desired effect (www.livrah.com) Wix blogging is horrible so I am now moving to Squarespace and I would really like to create a portfolio home page with the same look.

I'm using Shift, but putting this code block within the individual page's CSS (under Advanced) worked for me.

Good luck!

I did this in bedford on my photography page : www.neilafitzgerald.com/photography

#collection-53265f8de4b0d58e0bb2ae00 #page {
 max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
}

(played with the padding to get the styling right)

Bedford has a built-in gallery slider in the banner image area (see my home page) but it's only one image per slide. So if you wanted the gallery at the top you could instead use the code above and just hide the banner image (using css) on that page.

Hi jenmarek! I've tried to paste in the code you shared. It works perfectly when i'm going to the specific page via the url (http://www.12hrs.net/welcome-test) but when it's placed in a folder/ under an index it somehow doesn't. Any idea why and how I can solve it?

I've even tried to paste the code into the index settings and that works too. The only problem by doing it that way, is that it affect all pages in that index.

Any help is appreciated. Thanks!

how would you stretch just the gallery block and not the whole page?

Go into the Style Editor and type "100%" into the Page Width section. The images will resize themselves to fit the full screen when you refresh the page.

Exactly what I was looking for. Thank you!!

I had the same problem but in the Flatiron template. I've tried the full-width squarespace gallery blocks plugin and it works perfectly :) > www.leticiaconte.com

Amazing this code worked fantasticly for me. Petri you are a genius. It took a me second to see it on squarespace answers but the link under 'short answer' has the link and the plugin is super reasonable in price to. I've been looking for something like this for years. Here's the link again here. VOXPOP GALLERY PLUGIN.

where do you insert the block id?I cant seem to get this to work?

@octopus I'm trying to accomplish the same thing - where can I find the block-id of my gallery?

Thanks, Gabu! That solved the problem.

You can make blocks fullwidth with the below code. You must change 1150px to your content page width and swap out the #block-yui... id with the id of your specific block.

#block-yui_3_17_2_19_1513958090200_10267 {
   width: 100vw !important;
   left: calc(~"(100vw - 1150px) / -2"); !important;
}

Tilde (~) and quotation marks (") are used to stop LESS from ignore the attributes during compilation.

Link to plugin here

Super glad to hear it!