How To Fix Mobile Logo on Shopify Debut Theme

Technical Q&A
1

Hello! I am having issues with my mobile logo for my Shopify Store Debut Theme. Originally I increased the logo size on the desktop version and centered it, but now the mobile logo is wider than the page. I have tried a lot of different codes, but I can’t seem to get it to fit in the right size. My shop is willowgrovehome.myshopify.com and password “shop”. Please let me know if you can help!
Thanks so much!

Ellen

2

@ellendickenson

Hey,

the code you added is breaking your website, ideally you’d need to use a media query for it.

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 767px){
    [id] .site-header__logo img{
        max-width: 100% !important;
        width: 100% !important;
    }
}

Please let me know whether it works.

Kind regards,
Diego

3

Hi Diego! Unfortunately that code didn’t work for the mobile logo, but I discovered I had an error in my @media screen and (min-width: 250px) line, so I was able to fix it and change the logo to a smaller size. Thank you for your time!