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

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

PDI John
Go to solution Solved by eanderson,


  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

18 answers to this question

Recommended Posts

  • 3

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

 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

Edited by voxpopagency
Initial Revision

Vox Pop - Pro Squarespace designers & Developers

We're the best of the best 💕
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via voxpopagency.com

Link to post
  • 0

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!

Link to post
  • 0

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!

Link to post
  • 0

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;


Link to post
  • 0

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.

Link to post
This topic is now closed to further replies.

  • Create New...