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

Stretch gallery blocks to full-width of browser


liv r
Go to solution Solved by Petri Pottonen,

Question

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.

Edited by liv r
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 2

Hi liv r! Here's something you should try out:

Short answer

You can get a (commercial) plugin that does everything automatically. Here's a link to the full-width squarespace gallery blocks plugin if you're interested.

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. The code works with any template, including Beatrice.

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 Petri Pottonen

I'm a professional Squarespace developer / designer. I design sites and help folks with problems big and small. Available for freelancer work at [petripottonen.com][1] [1]: http://petripottonen.com

Link to post
  • 2

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.

alt text

100.jpg.49fc1dc6c1ab510e417be8cb361d7160.jpg

Link to post
  • 1

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.

Link to post
  • 0

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!

Link to post
  • 0

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.

Link to post
  • 0

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

Sue White is a Fine Art Wedding and Portrait Photographer based in West Tennessee. Honest. Romantic. Timeless Images. Nashville, Memphis, and Jackson, Tennessee. Available for destination weddings and elopements worldwide... www.suewhitephoto.com www.instagram.com/_suewhite_

Link to post
  • 0

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.

Edited by bartonsmith
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...