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

Five: Make image block span full width like header

Question

Hey everybody, hoping you can help. I want to design some images to span the entire width of the screen (like the headers already do on FIVE). However, I want them to appear in the body, but span past the side of the container width.

I put a stock image in place here: https://greencellfoam.squarespace.com/green-cell-coolers/ to show you the problem. The image block for the header obviously goes full and this one is limited to the page width.

Thanks for the help!

Edited by sheveron

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Has anyone figured out how to do this for all screen sizes?

Thank you! :)


>Hello, I'm Nicole. > I'm new to Squarespace, still finding my way and I hope I can help other users along the way.

Share this post


Link to post
  • 0

There's a very simple way to do this that solves for all screen sizes and devices:https://answers.squarespace.com/answers/196862/view.html

It works great in the Eamon template, but I'm unsure if it works as well in the others.

Share this post


Link to post
  • 0

If you're trying to make your site go full width of the browser viewport – this does the trick across devices and it's free. Copy and paste this CSS code into the Page Header Code Injection to create that full screen effect:


.content-inner {
       max-width: 100% !important;
       padding: 0 !important;
}
.collection-type-index .content-inner.has-content {
       padding: 40px !important;
}

And if you're using an Image Block, use the following to eliminate the padding around the image:


.sqs-block.image-block { padding:0 !important; }

This took me forever to figure out. Hopefully it works for all templates.

Edited by ads_chi
Initial Revision

Share this post


Link to post
  • -1

Long answer

Following Custom CSS example only works on one screensize


.image-block {
   width: 100vw;
   position: relative;
   left: -305px; /*changed depending on padding*/
   padding-left: 0 !important;
   padding-right: 0 !important;
}

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 image 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

Short answer

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

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

Create an account or sign in to comment

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


×
×
  • Create New...