• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Responsive logo change not happening on iPhone 6

Mr Lucky

Well-known member
#1
I have my forum logos set so the main logo shows on browser widths above 480px (that is the setting for narrow responsive)

Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        #logo {
        display: none;
        }            
           }
</xen:if>
Narrower than that that a smaller logo shows instead:

Code:
.mobilelogo
{display:none}
@media only screen and (max-device-width:480px)
{.mobilelogo
{display:initial;max-width:100%;height:auto;}
}
This all seems to work fine, testing on various mobiles (and Firefox responsive tool)

Except on safari iPhone 6 plus - both logos are showing together.

Can anyone explain why this might be happening?

Thanks.
 

tommydamic68

Well-known member
#2
I have my forum logos set so the main logo shows on browser widths above 480px (that is the setting for narrow responsive)

Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        #logo {
        display: none;
        }           
           }
</xen:if>
Narrower than that that a smaller logo shows instead:

Code:
.mobilelogo
{display:none}
@media only screen and (max-device-width:480px)
{.mobilelogo
{display:initial;max-width:100%;height:auto;}
}
This all seems to work fine, testing on various mobiles (and Firefox responsive tool)

Except on safari iPhone 6 plus - both logos are showing together.

Can anyone explain why this might be happening?

Thanks.
I believe you need to make these adjustments for the iPhone 6

iPhone 6:375px (portrait), 667px (landscape)
iPhone 6Plus:414 (portrait), 736px (landscape)