Button

[BaileeMurphy]

I am working to create a canvas course. I have created buttons for my homepage. When I log in to the course, the first view I see shows the 3rd button down being smaller than all other buttons. The buttons are the correct size when the zoom on the window screen is reduced.

How can I get the button to stay the size that it should be when the screen is at 100%? Included two pictures (Error and correct version)

[Chris_Hofer]

@BaileeMurphy ...

It's hard to tell without looking at the HTML code for your page.  It almost seems like there might be some code in there that is widening that bottom button a bit.  You might have to check out HTML code to see if there is a width property set for that button that can be corrected.  If you wanted to paste in some of the code from your page, people here in the Community might be able to help identify what might be the issue.

[BaileeMurphy]

<table style="border-collapse: collapse; width: 97.3653%; height: 937px; border-style: hidden;" border="1">
<tbody>
<tr style="height: 128px;">
<td style="width: 99.877%; height: 128px; border-style: hidden; text-align: center;"><a title="1| Introduction and Welcome 👋" href="https://sdhc.instructure.com/courses/1062004/modules/2687219" data-course-type="modules" data-published="true" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/modules/2687219" data-api-returntype="Module"><img src="https://sdhc.instructure.com/courses/1062004/files/135793660/preview" alt="Module 1_B.png" width="640" height="124" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/files/135793660" data-api-returntype="File" /></a></td>
</tr>
<tr style="height: 128px;">
<td style="width: 99.877%; text-align: center; height: 128px;"><a title="2| What is MTSS?" href="https://sdhc.instructure.com/courses/1062004/modules/2687234" data-course-type="modules" data-published="true" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/modules/2687234" data-api-returntype="Module"><img src="https://sdhc.instructure.com/courses/1062004/files/135793687/preview" alt="Module 2_B.png" width="640" height="128" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/files/135793687" data-api-returntype="File" /></a></td>
</tr>
<tr style="height: 128px;">
<td style="width: 99.877%; height: 128px; border-style: hidden; text-align: center;"><img src="https://sdhc.instructure.com/courses/1062004/files/135797568/preview" alt="Tier 1_2.png" width="598" height="196" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/files/135797568" data-api-returntype="File" /></td>
</tr>
<tr style="height: 128px;">
<td style="width: 99.877%; height: 128px; border-style: hidden; text-align: center;"><img src="https://sdhc.instructure.com/courses/1062004/files/135797614/preview" alt="Tier 2_B.png" width="396" height="194" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/files/135797614" data-api-returntype="File" /></td>
</tr>
<tr style="height: 128px;">
<td style="width: 99.877%; text-align: center; height: 128px;"><img src="https://sdhc.instructure.com/courses/1062004/files/135797710/preview" alt="Tier 3_N.png" width="189" height="186" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/files/135797710" data-api-returntype="File" /></td>
</tr>
<tr style="height: 128px;">
<td style="width: 99.877%; height: 128px; border-style: hidden; text-align: center;"><img src="https://sdhc.instructure.com/courses/1062004/files/135793711/preview" alt="Module 3_B.png" width="640" height="128" data-api-endpoint="https://sdhc.instructure.com/api/v1/courses/1062004/files/135793711" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>

[Chris_Hofer]

@BaileeMurphy ...

Thanks for sharing the code.  Right off the bat, as a general statement, tables should not be used for page design.  Tables are really meant to hold data.  However, some people do like to use tables so that things display nicely on their pages...so I totally get why you'd want to do that.  I've not pasted this code into my own sandbox course because I wouldn't be able to see the images since they are hosted within your own course.  As an alternative, have you tried centering each image on its own line without using tables?  Or, maybe the easier solution is to make a single image containing all those shapes and put that into your course.  That way, you aren't having to deal with getting everything to align.  You would ensure that the image looks the way you want within your graphics editor, and then you would upload it into your Canvas course.  What do you think of that idea?

[BaileeMurphy]

@Chris_Hofer - good information about the tables, we've always been told to use them to format the pages. I will try to upload each image and center it to see if that helps. I can't do it all as one image because each part of the triangle is a button for a different module. Thanks for the suggestions!

[Chris_Hofer]

@BaileeMurphy ...

---

I can't do it all as one image because each part of the triangle is a button for a different module.

---

Have you tried using an image map for a single image?  Here's a link for you by @DrNufer that you might find helpful:

HTML image map in Canvas

I'm sure Sean would answer any questions you might have about this.