[ARCHIVED] Embed a functioning and visually pleasing search bar in a Canvas page?

[fsilva1]

Hello, 

At my institution I have been tasked with designing a student services hub. Using a template from Miracosta has made this process really straightforward except for embedding a functioning search bar on our Libraries services page. 

I created an HTML file and then embedded it into the Canvas page using the following: 

<iframe src="/courses/[COURSE ID]/files/[FILE ID]/download" width="100%" height="[WHATEVER WORKS]" data-api-endpoint="https://[CANVAS DOMAIN]/api/v1/courses/[COURSE ID]/files/[FILE ID]" data-api-returntype="File"></iframe>

The result looks like this on a desktop:

But looks like this on the mobile app: 

The predicament is that I have another HTML file that displays the search bar perfectly on the mobile app, but spans across the entire page on a desktop and really looks quite bad and out of place. I will attach both files below for reference. 

I guess my major questions are: 

1. Am I even tackling this correctly? 
2. The search bar works, but on the app I seem to have to clear the cache on reset after two or three uses or the search bar stops working (being clickable). 
3. I know there is a way to hide HTML from desktop view using this: <div class="hidden-desktop hidden-phone hidden-tablet no-print"> but is there a way to hide HTML from the mobile app? In such an instance I could use both search bars on the page, but only the correct one being displayed on the desktop and mobile app. 
4. Should I be using something like this instead, but in the HTML portion of the RCE rather than uploading a file? 

Thank you in advance, 

-Frank