Community Contributor

Use Divs Instead of Tables on Home Page

Hi all.  Wondering if anyone can help me adjust a Canvas page using tables with image buttons to a page using div tags in two or three columns.  I've referenced this Home Sweet Homepages without Tables article (thank you  @clong  but I'm still not able to set it up correctly.   I've attached the HTML in the attached word document.  Thanks in advance for any help! 

**Also to note we have limited access to the code so cannot do any CSS as we don't have admin access as ID's!

Home page using tables

Tags (2)
4 Replies
New Member

I recommend looking into the grid that is built into Canvas.  You use .grid-row and col-xs-## classes to build a grid with columns.  It can even be responsive.  Check it out here.

Community Contributor

Thanks for the tip!  I think our instance of Canvas must strip that element of the Style Guide (does this with accordions too) so this is what it looks like once I insert the code:

314324_Screenshot_2019-05-30 Testing Grid DEV_PHY2049_QMSORGE.png

0 Kudos
Community Contributor

Hi Emily

Have a go at copying and pasting the code on the attached word doc .

This is using the div class Content Box. I use this class a lot for homepage design. All "buttons" are editable and responsive so if viewing on small screen or mobile they stack under each other. You'll need to add your links or you can insert your images and make the background colour of each grid "cell" white and add the links to the images.

I hope it's helpful. If you need help deciphering the html let me know and I'll do a screencast.



Community Contributor

Thank you Tina!  This did the trick and worked for me Smiley Happy  I appreciate your sharing.