Logo Size CSS Issues

Hello,

This CSS ("Increase Logo on Tablet screen") is effecting both the iPad in Portrait mode and on the iPhone. With this CSS, the iPad portrait size logo is correct, but it's also changing the logo size on an iPhone, making it too big for the phone. The second set of CSS ("Increase Logo on Mobile screen") seems to have no effect on the iPhone logo size:

/* Increase Logo on Tablet screen */
@media handheld, only screen and (max-width: 780px) {
.header-logo img {
max-width: 485px!important;
max-height: inherit !important;
padding-top: 25px;
}
}

/* Increase Logo on Mobile screen */
@media handheld, only screen and (max-width: 400px) {
.header-logo img {
max-width: 280px!important;
max-height: inherit !important;
}
}
Site: https://susanbensen.com

Please advise.

Thanks in advance,
Casper

  • Adam Czajczyk

    Hello Casper,

    I hope you're well today and thank you for your question!

    I'm not sure how Apple devices handle "handheld" media type but from what I know there are some issues on with full support of that across various devices. Apart from this, there shouldn't be any need to use it as it's mostly a matter of screen resolution. I would try this code instead then:

    /* Increase Logo on Mobile screen */
    @media screen and (max-width: 400px) {
    .header-logo img {
    max-width: 280px!important;
    max-height: inherit !important;
    }
    }
    
    /* Increase Logo on Tablet screen */
    @media screen and (max-width: 780px) {
    .header-logo img {
    max-width: 485px!important;
    max-height: inherit !important;
    padding-top: 25px;
    }
    }

    Two changes that I made here are that I removed "handheld, only" and switched an order of media queries.

    I think you might also want to give it a try without "!important" in rules as if there are no overriding media queries (or inline CSS for logo) that shouldn't be necessary. You can always add it back if it doesn't work without it :slight_smile:

    Give it a try please and let me know if that worked for you.

    Best regards,
    Adam

  • Dimitris

    Hey there Casper,

    hope you're doing good and don't mind chiming in! :slight_smile:

    The way you build these media queries, it's normal that tablet is overriding the mobile views, as the CSS rules of tablets are still in place under mobile.
    I'd rather change the snippet with the following so there won't be any overlaps.

    /* Increase Logo on Mobile screen */
    @media screen and (max-width: 400px) {
      .header-logo img {
        max-width: 280px!important;
        max-height: inherit !important;
      }
    }
    
    /* Increase Logo on Tablet screen */
    @media screen and (min-width : 401px) and  (max-width : 780px) {
      .header-logo img {
        max-width: 485px!important;
        max-height: inherit !important;
        padding-top: 25px;
      }
    }

    If this still troubles you, please grant us with temporary support access to your website so we could further inspect it and further test these CSS rules.
    You can do so via WPMUDEV Dashboard plugin as described in next link (no need to share credentials): https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Warm regards,
    Dimitris

  • Dimitris

    Hey there Casper,

    I inspected your website and I can see that the CSS rules I shared is already in place and work well.
    For widths lower than 401px the logo width is 280px, while for viewports with width from 401px up to 780px, it's 485px wide.

    Please keep in mind that you may need to alter these limits based on the actual viewports you need. In next link you can find widths for most popular devices.
    https://mydevice.io/devices/
    For example, iPhone 6 Plus has a width of 414px so you may want to alter previous media queries to
    @media screen and (max-width: 414px) {
    and
    @media screen and (min-width : 415px) and (max-width : 780px) {

    Warm regards,
    Dimitris

    PS. If you're unable to see these latest changes, please consider clearing all of the cases involving to this installation, including your browser's cache.
    http://www.refreshyourcache.com/en/home/