Logo broken iPhone6

[championweb]

why the logo is not displaying well on iPhone6 ?

see: http://www.responsinator.com/?url=http%3A%2F%2Fjohannelazure.com%2F2017%2F

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Do you see that on a real iPhone 6 phone ?

This problem comes from the img file itself, not from the theme, as you can see on demo it works.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[championweb]

I see that on a iPhone6 also.

I have tried with other images and it gives me the same problem. And why only on iPhone6?

[Radu]

I taught the image it’s broken literally but isn’t the problem it’s other!

Add this css to wp-admin -> them options -> genarl settings -> quick css

COPY CODE

@media screen and (max-width: 480px) {
.logo img {
    height: auto;
    max-width:310px
}
}

Play with 310 value

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[championweb]

At 310 it breaks on iPhone5. So I put it at 240. But it means that now the logo is not displaying well on tiny screen (less than iPhone5), and it is not as nice that it should on iPhone6.

Any idea why it would not resize on iPhone6 only? This is very unconfortable for my clients.

I have the same problem on this site : http://www.responsinator.com/?url=http%3A%2F%2Fangelevaliquette.com%2F1%2F

[championweb]

I have checked and I have the same problem on many sites. If logo is to long it doesn’t resize.

[Radu]

Hi,

The first rule will control the logo width on iphone and the second for devices with the width between 300 and 400 adapt it for your needs

COPY CODE

@media screen and (min-width: 400px) and (max-width: 480px) {
.logo img {
    height: auto;
    max-width: 310px !important;
}
}

@media screen and (min-width: 300px) and (max-width: 400px) {
.logo img {
    height: auto;
    max-width: 240px !important;
}
}

Adapt it for you needs

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[championweb]

I tried it on my website. Your code is not working well.

look: http://www.responsinator.com/?url=nicolaslehoux.com%2F

Iphone5 – it cut the logo
iPhone 6 Plump portrait · width: 414px – still broken

I am sure I am not the only one with that problem. Of course one solution is to put a tinyer logo but it was working well before. and most of the theme I use resize atomaticaly the logo. So I think the is a problem with Kleo.

[Radu]

Hi,

Try again with those

COPY CODE

/* Iphone 6 */
@media screen and (min-width: 400px) and (max-width: 480px) {
.logo img {
    height: auto;
    max-width: 310px !important;
}
}

/* Iphone 5 */
@media screen and (min-width: 310px) and (max-width: 400px) {
.logo img {
    height: auto;
    max-width: 225px !important;
}
}

Play with max width value for iphone 5 and 6, adapt it for your needs..

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts