[ARCHIVED] Information Being Cut Off on Homepage

[jennifernichols]

Howdy! I have designed a new homepage and when I make it my new 'front page' part of the last column of buttons is cut off. I know it has to do with the table the buttons are in and because the course stream and course navigation eat into the width availability, but I have yet to find the answer. Suggestions???

 

I greatly appreciate any information that can be provided. Thanks in advance .

[MattHanes]

Try flipping over to the HTML view and make sure your table is set for width: 100% like this:

<table style="border-collapse: collapse; width: 100%;" >‍‍

Or if you can copy the HTML View and let us see it, we might be able to help you diagnose the issue.

https://community.canvaslms.com/docs/DOC-16518-421265823 

[jennifernichols]

 @MattHanes ‌,

Yes, I do have it set at 100%. I have attached code below. Thanks for looking at it. 

<div style="text-align: center;"><img style="max-width: 100%; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591622/preview" alt="Biology with Mrs. Nichols (2).png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591622" data-api-returntype="File" /></div>
<div>
<table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 99.9999%; text-align: center;" colspan="3">
<p><img src="https://wentzville.instructure.com/courses/41628/files/1591675/preview" alt="Capture-4.JPG" width="450" height="127" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591675" data-api-returntype="File" /></p>
</td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center;"><img style="max-width: 320px; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591587/preview" alt="1-1.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591587" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center;"><img style="max-width: 320px; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591586/preview" alt="3.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591586" data-api-returntype="File" /></td>
<td style="width: 33.3333%;"><img style="max-width: 320px; max-height: 320px; display: block; margin-left: auto; margin-right: auto;" src="https://wentzville.instructure.com/courses/41628/files/1591582/preview" alt="5.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591582" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center;"><img style="max-width: 320px; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591579/preview" alt="4.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591579" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center;"><img style="max-width: 320px; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591576/preview" alt="6.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591576" data-api-returntype="File" /></td>
<td style="width: 33.3333%; text-align: center;"><img style="max-width: 320px; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591574/preview" alt="2-1.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591574" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center;"><img style="max-width: 320px; max-height: 320px;" src="https://wentzville.instructure.com/courses/41628/files/1591572/preview" alt="7-1.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591572" data-api-returntype="File" /></td>
<td style="width: 33.3333%;"><img style="max-width: 320px; max-height: 320px; display: block; margin-left: auto; margin-right: auto;" src="https://wentzville.instructure.com/courses/41628/files/1591570/preview" alt="8-4.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591570" data-api-returntype="File" /></td>
<td style="width: 33.3333%;"><img style="max-width: 320px; max-height: 320px; display: block; margin-left: auto; margin-right: auto;" src="https://wentzville.instructure.com/courses/41628/files/1591567/preview" alt="12-3.png" data-api-endpoint="https://wentzville.instructure.com/api/v1/courses/41628/files/1591567" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>
</div>

[MattHanes · Accepted solution]

 @jennifernichols , It's the img style="max-width: 320px; max-height: 320px; " that seems to be causing the issue. Try style=width:100% instead. It's still going to show the scroll bar on mobile devices, but it should fix it for wider screens. 

[jennifernichols]

 @MattHanes ‌,

Do I need to change the table data style width or the image style in the html code? And I am assuming if I do need to change the image style with to 100%, that I no longer need the pixel height? Ironically it looks wonderful in the mobile app under both the student and teacher view. 

[MattHanes]

That's correct, the image style and you won't need height either. Interesting about the mobile app because it didn't scale when just made my browser window smaller.

-Matt

[jennifernichols]

 @MattHanes ‌,

It worked! Thanks for the extra set of eyes. 

All the best.