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

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

Question

18 answers to this question

Recommended Posts

  • 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!

Share this post


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!

Share this post


Link to post
  • 0

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


Newbie website developer

Share this post


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;
 }
}





http://MANDAMILLER.COM

Share this post


Link to post
  • 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


.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

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

Share this post


Link to post
  • 0

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.

Share this post


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.

Share this post


Link to post
  • 0

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;
}



Share this post


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

×
×
  • Create New...