[ARCHIVED] Why are my buttons different sizes?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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:
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>
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.