Jump to content

How to get a block to run full width of visible page (beyond site container)?

Recommended Posts

Hi I'm editing a website running the Five template seen here: pluspod.squarespace.com

The video is in a coding block, and I want it to run full-width of the website - any ideas on how to do it? Here you can see it only runs to the edge of the site container:

alt text

I've tried stuff like setting the width as 100vw but then the video overflows and also doesn't sit central to the page.

P.S. Reason for not uploading the video as a header is because the client would like sound available.


Link to comment
  • Replies 1
  • Views 783
  • Created
  • Last Reply

For the sake of everyone following, I've come to this solution (most likely messy to any pro coders out there, but it works).

I edited the site's width to be 100% using the design styles. This meant however that the logo, nav links, and blocks of text also ran to the very limits of the page.

I therefore added margins using the custom css for the spacing of the logo and nav, and added in spacers either side of blocks that I didn't want running to the edge of the page.

On mobile view however, spacers disappear meaning that the text blocks ran to the edge of the page again. To override this, in the custom CSS I added in margin-left and margin-right values (25px), to bring the text away from the edge. I had to inspect the code to find out the div id's of the text blocks in order to dictate these margin values.

Link to comment


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.