mobile logo Dante

[pbi design]

Hello,

I have used a logo height of 85px, which works fine throughout the site, but on a mobile phone the logo width gets distorted. I would like the logo to be scaled proportionately. How do I do that?

thanks,
Rossitza

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi Rossitza,

For me it looks fine ( I tried resize browsers and look ) can you sent some screenshots about this problem??

Let us know,

Thanks,
laranz.

[pbi design]

I did include a screen shot in my previous post which shows the logo on a mobile phone and it is distorted. Here is another screenshot with both versions side by side for comparison.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add this to your custom css:

#logo img, #logo img.retina {
  max-width: 100&;
}

– Kyle

[pbi design]

Hi Kyle,

it’s still not working. The logo width still resizes when on a mobile phone – portrait view. Even when I resize my browser window on my desktop computer I can see the width getting scaled.

I haven’t uploaded a retina version of the logo though. Would that make a difference?

Rossitza

[Kyle – SUPPORT]

You’ve put the css inside a media query:

@media only screen and (min-width: 1200px) {
.client-item figure { height: 250px; }
}
.sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
background-color: #F4F4F4!important;
}
#logo img, #logo img.retina {
  max-width: 100&;
}

Which means it will only apply the css on screens larger than 1200px, which is not what you want. Please take it out of the media query. You need to add a closing bracket to close your media query

– Kyle

[pbi design]

I think I corrected that, but the logo issue is still not fixed.

Rossitza

[Kyle – SUPPORT]

Stupid me! I put & instead of %

#logo img, #logo img.retina {
  max-width: 100%;
}

– Kyle

[pbi design]

There we go!

But now, the logo is pushing the menu down. (see screen shot)

Can’t I specify a mobile size for the logo? Like 80% or 75%? Is there a setting I didn’t take care of in the theme options?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Yes you could use:

#logo img, #logo img.retina {
  max-width: 90%;
  min-height: 0;
}

– Kyle

[pbi design]

but would that affect the logo scale on all devices? I don’t want to change the current scale anywhere else – ONLY on a mobile phone screen.

[Kyle – SUPPORT]

You can use:

@media only screen and (max-width: 320px) {
#logo img, #logo img.retina {
  max-width: 90%;
  min-height: 0;
}
}

– Kyle

[pbi design]

perfect. thanks. do I still need to use first bit of code you sent? or should I delete that?

#logo img, #logo img.retina {
max-width: 100%;
}

I wasn’t having any issues with the width except on mobile phones.

[Rui Guerreiro – SUPPORT]

Stick only with the last one that is specific for mobiles.

-Rui

[pbi design]

got it. thanks.