Adjust logo image size for mobile only

Last Updated: Mar 02, 2018 07:57PM EST

Some stores may struggle to control the size of their logo image on mobile. We have a simple solution to help with this, a simple copy and paste code snippet which will help add some control and sharpness to your logo.

ADDING THE CSS SNIPPET

From your Shopify admin go to Online store > Themes below the theme you want to edit click Actions > Edit Code.


 

On the left sidebar, you will see a list of theme folders scroll down and, select Assets > then click on Queries.css.liquid. Scroll to the very bottom of the page and paste in the following code snippet:

@media screen and ( max-width: 740px ) {
  #logo img { max-width: 180px; }
}

You may increase/decrease the 180px value to your preference for your logo. Click save and test it out on mobile.

LOGGING YOUR CHANGES

We strongly suggest you keep track of any code changes made by you or other developers to your theme's code files. This will make upgrading to newer versions of the Icon theme in the future much easier and quicker. An easy way to keep track of these changes is by keeping a simple Google Doc with details on all code changes. Here is a great example:



Get help

Want to customize your theme?
Have questions not covered in our docs?
  • Ask a theme support question
  • Support Hours:
    9:30 - 17:30 EST
    Monday - Friday

retail@undergroundmedia.co.uk
http://assets2.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete