Notice: End-of-Life Announcement for all Shopify themes by Barrel > Read More

Close

Increase size of logo image on desktop devices

This tutorial was written for version 1.0.7 of the Mosaic theme. It should work for most other versions of the theme as well, although the line numbers might change a bit.

 

If you are using a logo image in our Mosaic theme, our theme by default will display it at a size of 220 x 100px.

This is quite tricky to change, due to the way that our code is structured. At the most, we’ve concluded the logo can be slightly enlarged by about 45 px, without having to restructure the entire header code in the Mosaic theme.

For example, before this tutorial, this example logo looks like this: before tutorial

After this tutorial, this logo now looks like this:

after tutorial

To reiterate, this change only works on desktop devices / larger screens.

 

Steps:

  1. Go to Edit HTML/CSS to edit the theme code. Shopify has a guide on how to do this here.
  2. In the Assets folder, open the file called style.scss.liquid.
  3. Starting around line 7967, you should see this line of code:
     @media screen and (min-width: $lg) {
        margin-top: 0;
        left: 31px;
        top: 36px;
    
        /* Hero only has border above $lg breakpoint
     even though this class will still be present */
        .header--border & {
           left: 41px;
           top: 43px;
        }
     }

    Change the number in blue above to 56. Your code should now look like this:

     @media screen and (min-width: $lg) {
        margin-top: 0;
        left: 31px;
        top: 56px;
    
        /* Hero only has border above $lg breakpoint
     even though this class will still be present */
        .header--border & {
           left: 41px;
           top: 43px;
        }
     }
  4. Now, go down to around line 8049 to look for this chunk of code:
     @media screen and (min-width: $lg) {
        margin-top: 0;
        right: 40px;
        top: 48px; 
     }

    Change the number in blue to 64. Your code should now look like this:

     @media screen and (min-width: $lg) {
        margin-top: 0;
        right: 40px;
        top: 64px; 
     }
  5. Now go down to around line 8141 to look for this code (make sure it refers to the .main-logo section):
     @media screen and (min-width: $sm) {
        width: 220px;
     }
     @media screen and (min-width: $lg) {
        height: 100px;
        margin-right: 0;
        width: 240px;
     }

    Change 100 to  150, and 240 to 300. Your new code should look like this:

     @media screen and (min-width: $sm) {
        width: 220px;
     }
     @media screen and (min-width: $lg) {
        height: 150px;
        margin-right: 0;
        width: 300px;
     }
  6. And lastly, go down to around line 8170, and look for this code (make sure it refers to the .logo section):
     @media screen and (min-width: $sm) {
        max-width: 200px;
     }
     @media screen and (min-width: $lg) {
        max-height: 100px; 
        max-width: 220px;
     }

    Change 100 to 150, and 220 to 295. Your code should now look like this:

     @media screen and (min-width: $sm) {
        max-width: 200px;
     }
     @media screen and (min-width: $lg) {
        max-height: 150px; 
        max-width: 295px;
     }

That’s it!