Why are my buttons different sizes?

Jump to solution
ProfBee
Community Explorer

Every time I open my Canvas page my buttons are different sizes.  I'd love for the button on the left to be larger than the others, but not if it means the other buttons change sizes every time I open the page! 

Look:

IMG_4861 2.PNG IMG_4862 2.PNG IMG_4864 2.PNG

 

Here's my code: 

</tr>
<tr style="height: 26px;">
<td style="height: 26px; width: 864.444px;" colspan="7"><img src="https://wwu.instructure.com/courses/1412042/files/67760929/preview" alt="Screen Shot 2020-09-14 at 11.27.04 AM.png" width="800" height="36" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67760929" data-api-returntype="File" /></td>
</tr>
<tr style="height: 20px;">
<td style="height: 150px; width: 150px; text-align: right; vertical-align: middle;" rowspan="3"><a href="https://wwu.instructure.com/courses/1412042/modules" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/modules" data-api-returntype="[Module]"><img src="https://wwu.instructure.com/courses/1412042/files/67756221/preview" alt="Modules.png" width="140" height="140" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67756221" data-api-returntype="File" /></a></td>
<td style="text-align: center; vertical-align: middle; height: 10px; width: 100px;"></td>
<td style="width: 100px; height: 10px; text-align: center; vertical-align: middle;"></td>
<td style="width: 100px; height: 10px; text-align: center; vertical-align: middle;"></td>
<td style="width: 100px; height: 10px;"></td>
<td style="width: 100px; height: 10px;"></td>
<td style="width: 100px; height: 10px;"></td>
</tr>
<tr style="height: 90px; text-align: left;">
<td style="vertical-align: middle; height: 95px;"><a href="https://wwu.instructure.com/courses/1412042/pages/syllabus" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/pages/syllabus" data-api-returntype="Page"><img src="https://wwu.instructure.com/courses/1412042/files/67754356/preview" alt="Syllabus.png" width="90" height="99" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67754356" data-api-returntype="File" /></a></td>
<td style="vertical-align: middle; height: 95px;"><a href="https://piazza.com/class/kf2pf9kvmlewk?"><img src="https://wwu.instructure.com/courses/1412042/files/67754355/preview" alt="Piazza.png" width="90" height="99" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67754355" data-api-returntype="File" /></a></td>
<td style="vertical-align: middle; height: 95px;"><a href="https://wwu.instructure.com/courses/1412042/pages/24-slash-7-zoom-room" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/pages/24-slash-7-zoom-room" data-api-returntype="Page"><img src="https://wwu.instructure.com/courses/1412042/files/67754450/preview" alt="247zoom.png" width="90" height="99" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67754450" data-api-returntype="File" /></a></td>
<td style="vertical-align: middle; height: 95px;"><a href="https://piazza.com/class/kf2pf9kvmlewk?cid=6"><img src="https://wwu.instructure.com/courses/1412042/files/67754372/preview" alt="Microvideos.png" width="90" height="99" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67754372" data-api-returntype="File" /></a></td>
<td style="vertical-align: middle; height: 95px;"><a href="https://huxley.wwu.edu/sal/spatial-analysis-lab-sal"><img src="https://wwu.instructure.com/courses/1412042/files/67759034/preview" alt="SAL.png" width="90" height="99" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67759034" data-api-returntype="File" /></a></td>
<td style="height: 95px;"><a title="Meet your instructional staff" href="https://wwu.instructure.com/courses/1412042/pages/Meet%20your%20instructional%20staff?titleize=0" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/pages/Meet%20your%20instructional%20staff" data-api-returntype="Page"><img src="https://wwu.instructure.com/courses/1412042/files/67756220/preview" alt="Meetus.png" width="90" height="99" data-api-endpoint="https://wwu.instructure.com/api/v1/courses/1412042/files/67756220" data-api-returntype="File" /></a></td>
</tr>
<tr style="height: 37px;">
<td style="text-align: right; vertical-align: middle; height: 10px; width: 105.556px;"></td>
<td style="width: 105.556px; height: 10px;"></td>
<td style="width: 105.556px; height: 10px;"></td>
<td style="width: 105.556px; height: 10px;"></td>
<td style="width: 105.556px; height: 10px;"></td>
<td style="width: 155px; height: 10px;"></td>
</tr>
</tbody>
</table>

Labels (1)
0 Likes
1 Solution
KristinL
Community Team
Community Team

Hi!

Unfortunately, sometimes that happens when tables are used to house images. Would you be able to reestablish that page without the table and use the percentage size for your images? Though, with that, be careful how small they get. 10% on a large screen is different than 10% on a mobile device.

View solution in original post