Increase logo size on mobile - Studio theme

[arg99]

Good morning.

Im using Studio theme. I managed to increase the size of the logo in desktop view but not in mobile view. in the mobile view there seems to be a size limit. Could someone help me?

Thanks!!

[kgbfashionista]

Hi,

I suppose you changed logo size with css, so you just need to find same class defined in @media

For example, if for a desktop you changed this:

.logo {

width:100px;

}

Then for a mobile look for this:

@media screen (max-width: 768px){

.logo{

width: 100px;

}

}

Something with media in it. It could be just media, media screen or media screen only

And it is usually followed by screen size max or min. Change you logo size in there, proportionally for every screen size.

[PageFly-Kate · Accepted solution]

Hi @arg99 

This is Kate from PageFly - Landing page builder

Here's how you can increase the size of the logo in the mobile view using CSS:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

@media only screen and (max-width: 767px) {
.header__heading-logo {
width: 120px;
height: auto;
}
}

Note: Replace "120px" with the desired width of the logo in the mobile view.

Hope my answer will help you

[GemPages]

Hello @arg99 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

<style>
   @media screen and (max-width: 767px){
      .header__heading-logo {
         max-width: 100%;
      }
   }
</style>

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.