Jump to content

Stretch gallery blocks to full-width of browser

Recommended Posts

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.

Link to comment
  • 9 months later...
  • Replies 14
  • Views 55.6k
  • Created
  • Last Reply

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 comment
  • 2 months later...

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 comment
  • 7 months later...
  • 5 months later...
  • 2 weeks later...
  • 1 month later...
  • 4 months later...
  • 2 weeks later...

@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 comment
  • 8 months later...
  • 3 months later...

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 comment
  • 11 months later...


This topic is now archived and is 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.