Logo and social icons overlap on iOS devices

[clint205]

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.

[Raghavendra]

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 */
}
}

[clint205]

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

[Raghavendra]

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.

[clint205]

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

Thanks!

[Nexus]

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!

[clint205]

Great! Thank you.

[Nexus]

Cheers!

[Author]

Posts