How can I adjust my logo size for mobile viewing?

Store Design
1

Hi,

I am on the boundless theme and my logo is to small on mobile but good on PC.

I tried all the other codes out there but it hasn’t worked.

www.angelicalfashion.com PASS = 1

2

@AngelicalF

Please follow these instructions, it works for the Boundless theme as well.

Kind regards,
Diego

3

when I input the code and save it the logo goes permanently smaller. When I change the value it has no effect on the size of the logo.

4

I think i fixed it actually, if theres a problem ill tell you

5

its weird because i had to use the opposite values to make effect but sometimes when i change the value no effect happens and sometimes it does.

6

Hi @AngelicalF ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 749px) {
    .site-header__inner > .grid__item {
        width: 70px;
    }
    .site-header__inner > .grid__item.medium-up--two-thirds {
        width: inherit;
    }
    .site-header__inner > .grid__item .site-header__logo-image {
        max-width: 80% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

This code worked better than the other one, however when i increase the size, it becomes off centre. Is there a way to move it a bit left?

www.angelicalfashion.com Pass = 1

8

Hi @AngelicalF ,

You can try replace previous code by below code:

@media (max-width: 749px) {
    .site-header__inner > .grid__item {
        width: 70px;
    }
    .site-header__inner > .grid__item:first-child {
        width: 45px;
    }
    .site-header__inner > .grid__item.medium-up--two-thirds {
        width: inherit;
    }
    .site-header__inner > .grid__item .site-header__logo-image {
        max-width: 80% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like