Menu icon Foundation
Canvas fit full column width (no padding)

Hi,

I have put a processing sketch in a canvas. From what I know, it's the only element that can be used to embed it. Ideally I would have liked to set the width of the canvas to the full width of the window, but it can be tricky, especially with a responsive site (and my sketch is not resizable). But at least, I'd like to be able to fit my sketch to the full width of the 12 column, so that it forms a nice visual block with the rest of the page.
I'd just like to suppress the padding, or if anyone knows how to set the canvas to full width with little Css and html... (I looked at a number of posts and as my skills are rather limited, a lot of solutions seemed complex to me and didn't work when I tried to implement them-).
I tried the following in my css :

canvas {
    margin: 0px !important;
    padding: 0px !important;
   display: block !important;
}
            

         

You can view the page here :
http://coraliediatkine.eu/VisualProcessing.html

But no success.

The bit of code is :

            

         

 <div class="row">
     <div class="large-12 columns">
         <div class="panel">
     	
   
         <h5 class= "new">A Processing Study</h5> 
         <h6 class="worktitle">Change</h6>
       

		<div id="content">
			
			
			
			
			
				<canvas id="ChangeTestlarge" data-processing-sources="/SiteWeb/Processing/ChangeTest_large/web-export/ChangeTest_large.pde" width="950" height="587">
					<p>Your browser does not support the canvas tag.</p>
					<!-- Note: you can put any alternative content here. -->
				</canvas>
				<noscript>
					<p>JavaScript is required to view the contents of this page.</p>
				</noscript>
	    	</div>
			
    	<!--	<p id="description"></p>
			<p id="sources">Source code: <a class="contacts" href="ChangeTest.pde">ChangeTest</a> </p>
			<p>
			Built with <a class="contacts" href="http://processing.org" title="Processing">Processing</a>
			and <a class= "contacts" href="http://processingjs.org" title="Processing.js">Processing.js</a>
			</p>-->
	

  </div>  </div>  </div>

Thank you!

canvaspaddingfull widthcolumns

Hi,

I have put a processing sketch in a canvas. From what I know, it's the only element that can be used to embed it. Ideally I would have liked to set the width of the canvas to the full width of the window, but it can be tricky, especially with a responsive site (and my sketch is not resizable). But at least, I'd like to be able to fit my sketch to the full width of the 12 column, so that it forms a nice visual block with the rest of the page.
I'd just like to suppress the padding, or if anyone knows how to set the canvas to full width with little Css and html... (I looked at a number of posts and as my skills are rather limited, a lot of solutions seemed complex to me and didn't work when I tried to implement them-).
I tried the following in my css :

canvas {
    margin: 0px !important;
    padding: 0px !important;
   display: block !important;
}
            

         

You can view the page here :
http://coraliediatkine.eu/VisualProcessing.html

But no success.

The bit of code is :

            

         

 <div class="row">
     <div class="large-12 columns">
         <div class="panel">
     	
   
         <h5 class= "new">A Processing Study</h5> 
         <h6 class="worktitle">Change</h6>
       

		<div id="content">
			
			
			
			
			
				<canvas id="ChangeTestlarge" data-processing-sources="/SiteWeb/Processing/ChangeTest_large/web-export/ChangeTest_large.pde" width="950" height="587">
					<p>Your browser does not support the canvas tag.</p>
					<!-- Note: you can put any alternative content here. -->
				</canvas>
				<noscript>
					<p>JavaScript is required to view the contents of this page.</p>
				</noscript>
	    	</div>
			
    	<!--	<p id="description"></p>
			<p id="sources">Source code: <a class="contacts" href="ChangeTest.pde">ChangeTest</a> </p>
			<p>
			Built with <a class="contacts" href="http://processing.org" title="Processing">Processing</a>
			and <a class= "contacts" href="http://processingjs.org" title="Processing.js">Processing.js</a>
			</p>-->
	

  </div>  </div>  </div>

Thank you!

coralie diatkine almost 5 years ago

Figured it out....

```
a img {
border: 0px solid transparent;
}

}
canvas {
display: block;
outline: 0px;
margin: 0em;
padding:0em;
}
#content {
margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
width: 1000px; min-width: 300px; overflow: auto;
border-left: 0px solid black; border-top: 0px solid black;
border-right: 0px solid black; border-bottom: 0px solid black;
background-color: black;
}