Logo and social icons overlap on iOS devices

Support Forums for LiveMesh Themes & Plugins Forums Appdev Theme Support Logo and social icons overlap on iOS devices

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2987
    Clint205clint205
    Member

    I have gotten the logo to show up on the iOS retina devices; however, there continues to be overlap of the logo and the social icons. Im attaching screenshots of what I am talking about on the iPhone in both landscape and portrait.

    #3004
    RaghavendraRaghavendra
    Moderator

    Hey – beautiful illustrations. You must be one happy person developing those nice little apps.

    Header sizes vary due to different logo sizes and hence we need some minor customizations to fix issues in certain device resolutions. Here is what you can do to fix the issue:

    Insert the following Custom CSS into Custom CSS tab in theme options panel or in custom/custom.css file –

    @media only screen and (max-width: 767px) {
    #site-logo {
    margin-bottom: 20px; /* Change this value to suit your needs */
    }
    }
    
    #3020
    Clint205clint205
    Member

    Thanks! I do love what I do 🙂 Also, thanks for getting back to me so quickly.

    I added the above code and it only impacted the the desktop version (as I shrink the window it will not overlap any more); however, it did not impact the iphone version (the iPad version now looks correct since adding the retina logo).

    I’m not sure if there is specific code that needs to be added to the iphone version since it uses the retina logo?

    Also, I had two more question. I’d like to add a link to my privacy policy (which I have created on separate page) in the footer. I havent been able to figure out how to add a link successfully in the footer. What do I need to do?

    Is there a way to add the arrow to the top on the mobile versions as well?

    Thanks,
    Scott

    #3057
    RaghavendraRaghavendra
    Moderator

    Can you try this?

    @media 
    (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
       #site-logo {
    margin-bottom: 20px; /* Change this value to suit your needs - will impact both iPad and iPhone */
    } 
    }
    

    Will get back to you on the other queries in few hours time. Also, pls consider that you may not require go-to-top button iOS devices at least since touching the top bar takes you to the top. I use this all the time. Not sure such an option exists in Android though.

    #3165
    Clint205clint205
    Member

    The logo is now working correctly. Could you get back to me on the other questions?

    Thanks!

    #3174
    NexusNexus
    Moderator

    Regarding the link in the footer, you can insert any html there. For example copy the following code and modify it to your liking and insert your text into the Footer Insert textbox in “Appearance > Theme Options > Footer”

    Copyright © 2013 Mysite Read Privacy Policy and some more text

    Copyright © 2013 Mysite Read Privacy Policy and some more text

    Regarding the second query, you have to modify the main.js file in the theme folder. In line number 365 reduce the value of the width to 100 or something.

    if (width > 768 && (yPos > 200))

    Thanks!

    #3203
    Clint205clint205
    Member

    Great! Thank you.

    #3218
    NexusNexus
    Moderator

    Cheers!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Logo and social icons overlap on iOS devices’ is closed to new replies.