Store Locator Widget doesn't Look Right on Mobile Devices

Some mobile themes will have a layout which disrupts and overwrites the Store Locator Widget. You can add CSS to the display settings that will only take effect when the mobile theme is in use.

You just need to use the @media screen tag and apply a max-width to it, so the code will only apply to smaller screen sizes.

The example code here will only take effect when the viewing device is less than 500 pixels, and will otherwise leave the desktop theme's styling alone.

To make these changes, please follow these steps:

  1. From Shopify's admin, select Apps.
  2. Select Store Locator.
  3. Select Settings.
  4. Select Display Settings.

    select display settings

  5. Copy and paste this code into the "Page Header HTML" field: 
    @media screen and (max-width: 500px) { 
    .search_bar { 
    margin-top: 500px !important; 
    float: left !important; 

    paste the code

  6. Select Save.

That's it! 

Was this article helpful?
0 out of 0 found this helpful