Jump to content

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

Recommended Posts

  • Replies 18
  • Views 19.1k
  • Created
  • Last Reply
  • 3 months later...
  • 1 month later...
  • 2 years later...
  • 4 weeks later...
  • 4 weeks later...

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

Link to comment
  • 1 month later...

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

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 3 weeks later...
  • 2 months later...
  • 10 months later...
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.