Embed a functioning and visually pleasing search bar in a Canvas page?
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:
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:
Am I even tackling this correctly?
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).
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.
Should I be using something like this instead, but in the HTML portion of the RCE rather than uploading a file?