[ARCHIVED] Buttons on homepage not working with phone

[HerrLewis]

I have created a home page with buttons with embedded links.  They work fine on my computer but when I try to click on them on my phone on the student app, it downloads the png file.  Do buttons not work with mobile devices?

[rseilham]

Hi @HerrLewis, 

Can you share a screenshot or give an example? Is the issue while embedding a third party service (Google Sheets, etc) or linking through a document in the course? 

[HerrLewis]

It is an issue with embedding a 3rd party service, zoom.  I am trying to have the click on the button to go a reoccurring zoom meeting.

[rseilham]

@HerrLewis, 

How are the buttons being added to the page? You should be able to use images as links. Sometimes when you are using CSS or other methods to display images, the mobile app won't work as expected. If you can give me a little more information about how the images are being added to the page (or even some code) I'll take a look. 

[HerrLewis]

Thank you, Ryan!  Here is the code for the page, I have not linked all of the images yet:

<p style="text-align: center;"><span style="font-size: 36pt; color: #000080;"><strong> <img src="https://u46.instructure.com/courses/41475/files/1042379/preview" alt="lewishaveagreatday.jpg" data-api-endpoint="https://u46.instructure.com/api/v1/courses/41475/files/1042379" data-api-returntype="File" /></strong></span></p>
<p style="text-align: center;"><span style="font-size: 36pt; color: #000080;"><strong>Welcome to German 2!</strong></span></p>
<p>&nbsp;<a style="font-family: inherit; font-size: 1rem;" href="https://zoom.us/j/94328147785?pwd=Y1FwZFNmVElZdnE3aDVNREJDZjJYZz09" target="_blank" rel="noopener"><img role="presentation" src="https://u46.instructure.com/courses/41475/files/1025695/preview" alt="zoombutton (2).png" width="200" height="193" data-api-endpoint="https://u46.instructure.com/api/v1/courses/41475/files/1025695" data-api-returntype="File" /></a><a title="Syllabus" href="/courses/41475/assignments/syllabus"><img style="color: var(--ic-brand-font-color-dark); font-family: inherit; font-size: 1rem;" src="https://u46.instructure.com/courses/41475/files/1187777/preview?wrap=1" alt="Syllabusutton-1.png" width="200" height="193" /></a><a title="1. Schulwoche: 24. - 28. August 2020" href="https://u46.instructure.com/courses/41475/pages/1-schulwoche-24-28-august-2020"><img style="font-family: inherit; font-size: 1rem;" src="https://u46.instructure.com/courses/41475/files/1131580/preview" alt="Thisweekbutton (1)-1.png" width="200" height="193" data-api-endpoint="https://u46.instructure.com/api/v1/courses/41475/files/1131580" data-api-returntype="File" /></a><img style="font-family: inherit; font-size: 1rem;" src="https://u46.instructure.com/courses/41475/files/1131427/preview" alt="pastweeksbutton.png" width="200" height="193" data-api-endpoint="https://u46.instructure.com/api/v1/courses/41475/files/1131427" data-api-returntype="File" /><img style="font-family: inherit; font-size: 1rem;" src="https://u46.instructure.com/courses/41475/files/1025411/preview" alt="resourcesbutton.png" width="200" height="193" data-api-endpoint="https://u46.instructure.com/api/v1/courses/41475/files/1025411" data-api-returntype="File" /> <img src="https://u46.instructure.com/courses/41475/files/1199511/preview?wrap=1" alt="essentialgermanbutton (1).png" width="200" height="193" /><span style="font-family: inherit; font-size: 1rem;"> </span><a title="Contact Herr Lewis" href="https://u46.instructure.com/courses/41475/pages/contact-herr-lewis"><img style="font-family: inherit; font-size: 1rem;" src="https://u46.instructure.com/courses/41475/files/1025670/preview" alt="Contactbutton.png" width="200" height="193" data-api-endpoint="https://u46.instructure.com/api/v1/courses/41475/files/1025670" data-api-returntype="File" /></a><span style="font-family: inherit; font-size: 1rem;"> <img src="https://u46.instructure.com/courses/41475/files/1188184/preview?wrap=1" alt="aboutbutton (2).png" width="200" height="193" /></span></p>

[rseilham]

Hi @HerrLewis,

I tested this out and look over the code and I don't see why this would cause the PNG issue you described. I was able to open the Zoom link on iOS and Android. Are you using any CSS or external styling? Are you seeing this on iOS and Android? Also, if you link directly to an item in the course, are you using the link tools on the side bar or hard linking? Sorry for all the questions, but I'm stumped on this one.