Jump to content

Make block full width of page on a single page?

Recommended Posts

Hi All - we are creating a page where we are embedding an iFrame (from Tableau) and we want to - on *just* that page - remove all the formatting from the rest of the page.

We have achieved this for the most part just by removing the header with 

<style>
#header { display: none }
</style>

and by changing the background color to white, but we still have borders on either side of the block, even when block width is set to 100

Is there a way to remove those borders?

We've tried:

#page, #content {
   padding: 0px 0px;
   margin-right: 0px;
   margin-left: 0px;
   max-width: 100%
}

Which doesn't seem to do it

 

Thanks for any advice!

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Hi dbellisario, 

Have you tried negative values? Most likely your template has default canvas size and currently your content has no padding when it comes to canvas size but in reality it leaves a huge gap. 

But do try something like

margin-right: -20px;
margin-left: -20px;

This usually does the trick. For more hassle free solution, you can try out our full-width plugins (full refund guaranteed if plugin does not suit for you): https://voxpopagency.com/products/full-width-blocks

Link to comment

@VoxPop_Agency - That solution seems to work! That leaves one remaining question: how do I find out what the canvas size is exactly so that I can compensate accordingly?

For example, is there some CSS object that I can find in the site code that would indicate what the margins are set for?

Thanks for the guidance!

Edit Update: I think I found it as a "Site Margin" setting under Design>Site Space. It is 3vw

When I set:max-

width: 106%
margin-right: -3vw;
margin-left: -3vw;

however it doesn't quite work, it leaves a white border on the right side of the page; you can see that on the test page:

https://www.aulera.com/anontest

 

Link to comment

Archived

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.