Logo size mobile

Support
#1

My logo is too big for my iphone. See image below.

When I go to X > launch > Header > Logo - image > logo width > and change that number nothing changes on my mobile phone only on desktop…

Help please…

Thanks

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 360px){
    .x-brand img {
        width: 200px;
    }
}
#3

I have the same problem. Do I delete the exiting text then add the additional or insert it within certain brackets?

#4

Hello @Seachange,

Thanks for writing in! If you’re using an image, using the snippet that @thai provided should give you what you need, but you will likely need to make adjustments to have it suit your particular situation. If you’re using actual text for your logo, then this would be something different altogether that would either need to be adjusted with shorter text for all viewports, or a font-size adjustment at a particular viewport. For example, you might have a base font-size set from the theme’s settings, but then you could use the following to adjust it at a particular breakpoint:

@media ( max-width: 360px ) {
  .x-brand {
    margin-top: 30px;
    font-size: 21px;
  }
}

You will want to make sure to adjust both the margin-top value and font-size to ensure that your vertical alignment is as you wish on a mobile device.

Cheers!

#5

Hi Kory
Do I delete the existing code that is already there? Or do I paste in the new code after the existing code. My website is phatrunner.com
Seachange

#6

@Seachange,

If you already have custom code modifying that portion of the styles, you could replace it with this to ensure you’re not having old styles pile up on top of one another. Also, just to make sure: please keep in mind to never make updates to core theme files. I’m not sure if you’re referencing styles in the core stylesheet, but new styles should always be added either via a child theme, or via the theme’s global CSS editor.

Cheers!

#7

Hi Kory
I followed those instructions. The size of my text logo changes on the “customise” view for mobiles. It doesn’t change the tablet view on “customise”. When I check on my mobile the text is still too big. I cleared my cache in Safari and Chrome but it still shows the same. Please advise.
phatrunner.com

#8

Hi again,

You can create breakpoints and change the size accordingly. You can make use of the following code:

@media screen and ( max-width: 979px ) {
  .x-brand {
    margin-top: 30px;
    font-size: 21px;
  }
}
@media screen and ( max-width: 767px ) {
  .x-brand {
    font-size: 18px;
  }
}
@media screen and ( max-width: 479px ) {
  .x-brand {
    font-size: 15px;
  }
}
@media screen and ( max-width: 360px ) {
  .x-brand {
    font-size: 12px;
  }
}

Adjust the font size as per your need. Hope this helps!

#9

Hi Nabeel
Thank you very much. That worked. I really appreciate you and Kory’s quick responses. Once again, thank you.
Seachange

#10

You’re most welcome Seachange.

Cheers!