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

Make block full width of page on a single page?

Question

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!

Edited by dbellisario
Added our attempt

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1

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

Share this post


Link to post
  • 0

@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

 

Edited by dbellisario

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