Top

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, follow these steps:

  1. From "Shopify Admin", select Apps.

    select apps

  2. Select Store Locator.

    select store locator

  3. Select Settings.

    select settings

  4. Select Display Settings.

    select display settings

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

    paste the code

  6. Select Save.

    Select Save

That's it!