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

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


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.


Edited by coalstudio
Initial Revision

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

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.

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