-
AuthorPosts
-
June 6, 2014 at 10:37 pm #275857
When viewing my website via my iphone and ipad, the logo appears very blurry and is not centered between the drop down menu. Any way to fix this?
Please see the following screenshot:
http://my.jetscreenshot.com/16750/20140606-sbqg-34kbThank you,
Lin- This topic was modified 10 years, 6 months ago by OriginsSpeak.
June 6, 2014 at 10:41 pm #275863Also the logo is not centered from top to bottom. How can we fix this?
Thank you!
June 6, 2014 at 10:45 pm #275867Hey!
Change the code i gave you to:
@media only screen and (max-width: 767px) { .logo img { position: relative; top: 12px; } .header-scrolled .logo img{ top: 0; } }
Cheers!
JosueJune 6, 2014 at 11:42 pm #275892Will this uncenter the logo when viewed by a standard pc? And sorry, I’m not familiar with code as much. Could you give me what I should copy and paste exactly.
Thank you Josue!
June 6, 2014 at 11:48 pm #275894No, that will apply the change i gave you in the other topic only when viewed in desktop, that way it doesn’t affect the mobile view.
Look for this code in the Quick CSS:
.logo img { position: relative; top: 12px; } .header-scrolled .logo img{ top: 0; }
Simply replace it by this:
@media only screen and (max-width: 767px) { .logo img { position: relative; top: 12px; } .header-scrolled .logo img{ top: 0; } }
Best regards,
JosueJune 7, 2014 at 12:03 am #275908I pasted this as instructed by it reverted my logo back to it’s original state being uncentered when viewing on a desktop browser.
?
June 7, 2014 at 12:10 am #275910Sorry, small typo on my code, use this one instead:
@media only screen and (min-width: 767px) { .logo img { position: relative; top: 12px; } .header-scrolled .logo img{ top: 0; } }
Best regards,
JosueJune 7, 2014 at 1:04 am #275931Used this one and while it corrected the desktop browser, it did nothing for the iphone/ipad browser.
The logo still appears blurry and not centered correctly. The main concern at this point is the blurriness.Thanks,
June 7, 2014 at 1:14 am #275940This will fix it:
@media only screen and (max-width: 767px) { .responsive .logo a , .responsive .logo img{height: 50px !important; max-height:50px !important; top: 7px; left: -3px; } }
Result:
Regards,
JosueJune 7, 2014 at 1:24 am #275946Thank you, it worked :)
June 7, 2014 at 1:27 am #275948You are welcome, always glad to help :)
Regards,
Josue -
AuthorPosts
- The topic ‘Logo appear very blurry via iphone and ipad’ is closed to new replies.