Occasionally I'm asked how to do some of the Canvas layouts that I do. Below, I'm including the code that you can place in your canvas course with some basic instructions for formatting images to work with them. If you would like your Canvas page to do something in particular and this doesn't suit your needs, let me know.
One of the problems with Canvas is that it doesn't adapt well to small displays like phones, and all of these designs attempt to adapt to that.
Soon, I will include a couple of videos explaining how to implement this code. Canvas is a pretty great tool, and once you get the hang of it it can do just about anything you might expect it to.
Layout Code Snippets for use on Canvas
How to use the code: I recommend using a fresh page to post this code in unless you know what you're doing.
Note: I'm giving you this code, but I can't guarantee that you won't mess something up accidentally while using it. Make sure that you copy what you have into another page first if you're not sure what you're doing.
Two Column Home Page
Use something like Canva (or whatever graphic design program you like) to generate the images that you want to use for your units and headers. These columns stack into one column when viewed in a small window or on a phone.
<div style="width: 100%; max-width: 1000px; clear: both;"><img alt="Title Placeholder" src="https://erfurth.co/sites/default/files/inline-images/title-placeholder.jpg" width="100%" />
</div>
<div style="width: 48%; padding: 1%; min-width: 300px; margin: 0 auto; display: block; float: left; clear: right;"><img alt="Unit Placeholder" src="https://erfurth.co/sites/default/files/inline-images/unit-placeholder.jpg" width="100%" /></div>
<div style="width: 48%; padding: 1%; min-width: 300px; margin: 0 auto; display: block; float: left; clear: right;"><img alt="Unit Placeholder" src="https://erfurth.co/sites/default/files/inline-images/unit-placeholder.jpg" width="100%" /></div>
<div style="width: 48%; padding: 1%; min-width: 300px; margin: 0 auto; display: block; float: left; clear: right;"><img alt="Unit Placeholder" src="https://erfurth.co/sites/default/files/inline-images/unit-placeholder.jpg" width="100%" /></div>
<div style="width: 48%; padding: 1%; min-width: 300px; margin: 0 auto; display: block; float: left; clear: right;"><img alt="Unit Placeholder" src="https://erfurth.co/sites/default/files/inline-images/unit-placeholder.jpg" width="100%" /></div>
<div style="clear: both; width: 100%; margin: 10px 0;"> </div>
To add more units, simply copy and paste more of these in there (above the very last line). They will stack up neatly.
<div style="width: 48%; padding: 1%; min-width: 300px; margin: 0 auto; display: block; float: left; clear: right;"><img alt="Unit Placeholder" src="https://erfurth.co/sites/default/files/inline-images/unit-placeholder.jpg" width="100%" /></div>
Additionally, as I explain in the video, you can use this bit of code inside each of your img tags to make everything flow together neatly.
style="width: 100%; max-width: 500px;"
hljs.initHighlightingOnLoad();