Logo appear very blurry via iphone and ipad - Support | Kriesi.at

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
June 6, 2014 at 10:37 pm #275857
OriginsSpeak
Participant
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-34kb

Thank you,
Lin
- This topic was modified 10 years, 5 months ago by OriginsSpeak.
June 6, 2014 at 10:41 pm #275863

OriginsSpeak
Participant

Also the logo is not centered from top to bottom. How can we fix this?

Thank you!

June 6, 2014 at 10:45 pm #275867
Josue
Inactive Moderator
Hey!

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!
Josue
June 6, 2014 at 11:42 pm #275892

OriginsSpeak
Participant

Will 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 #275894
Josue
Inactive Moderator
No, 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,
Josue
June 7, 2014 at 12:03 am #275908

OriginsSpeak
Participant

I 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 #275910
Josue
Inactive Moderator
Sorry, 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,
Josue
June 7, 2014 at 1:04 am #275931

OriginsSpeak
Participant

Used 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 #275940
Josue
Inactive Moderator
This 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,
Josue
June 7, 2014 at 1:24 am #275946

OriginsSpeak
Participant

Thank you, it worked :)

June 7, 2014 at 1:27 am #275948

Josue
Inactive Moderator

You are welcome, always glad to help :)

Regards,
Josue
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Logo appear very blurry via iphone and ipad’ is closed to new replies.