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


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 comment
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

14 answers to this question

Recommended Posts

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

Create an account or sign in to comment

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

  • Create New...