10 replies to this topic

[raezerj]

Hello!

I want to improve the look of my logo on the new iPad (right now it looks blurry on the retina display). I thought the solution could be to enlarge the image to twice its size (800px) and use one of the suggestions above to shrink it back down to the current size (400px).

I tried these two solutions (from this post: http://www.pagelines...and-nav-size/p1), but they didn't work -- the image remained at the uploaded size (800px):

 #brandnav .title-container{width:400px !important;}

 img.mainlogo-img {width: 400px !important;}

My site: www.approachguides.com

Any suggestions? Thanks!

[mackenzie]

Do you have the original copy of your logo, possibly from the graphic? Stretching the image to double it's size and then shrinking it won't change the pixel resolution in the file. You would need to adjust the original image and then save it as a new version, if that makes sense. I'm assuming this is in the new iPad?

[gyoery]

I dont See the point in image resizing. Especially not in client size browsers. And not when using jpegs. I believe the image should be saved in the displayable size, as PNG or gif.

[catrina]

Do you have the editable file for your logo? Is it an AI/Illustrator file? If so, it can be resized and saved as a PNG or other web-friendly format without sacrificing quality, but I don't know what difference it would make on the iPad. By "blurry" do you mean that the logo is appearing pixelated?

[Danny]

This isn't a PageLines product issue, you will need to contact Apple's support regarding this, I did a search and found a few topics. Simply search google for "images blurry new ipad"

[raezerj]

Thanks all. I have the AI file of the logo and have tried a few things -- high-res, PNG, GIF, etc. I know the blur isn't a pagelines issue, but I thought I would try resizing it (this is one part of a solution that works for preventing blur with ebook images), so was trying to figure out how to do that w your platform. Do you know how to control the image size in the header with CSS?

[Rob]

Just a little issue in terms of graphics editing... I found this in looking at the image information: 399px ?— 75px (scaled to 400px ?— 75px) Your .png file is actually scaled to 400, but it's truthfully 399px. That one pixel scaling is likely making it fuzzy in your iPad. You may need to resize it to ensure it's actually 400, or change the scaling to 399px (which is much easier). Otherwise, Danny's correct that this is really an Apple issue.

[gyoery]

OT: So what, if it is not a pagelines issue? 90% of the stuff that is being asked here are css or plugin issues... How did that saying go? "If you ain't got nothing nice to say....." Danny, why post, if it aint helpin? Look @ rangelone... he at least looked at the code.

[catrina]

@raezerj Do you need assistance with this issue or anything else?

[sp1te]

Hello everyone, I have just been trying to get this done today as well. I want to serve 2 separate images one for HiDPI screens, and one for normal res screens. So far here is my solution, I want to server 2 separate images so I can minimize my bandwidth usage. Using css this is what I have came up with so far. 

 

The only problem I have had is on my child pages this dies so I'm currently working on that now. 

 

I use the following code to remove my logo.

 

 
#branding .mainlogo-img
{
display:none;
}

 

Then I take the following code and point it at my two images one larger rez and one lower rez. the one on top is standard res. 

 

 
.mainlogo-link
{
width:662px;
height:100px;
background: url(../wp-content/uploads/2013/02/elimergel_logo_again.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) 
{
.mainlogo-link {
background: url("../wp-content/uploads/2013/02/elimergel_logo_again-2x.png") no-repeat;
background-size: 662px 100px;
}
}

 

If you go to my site it seems to be working peachy keen until you browse to the Wedding page. I'm trying to figure out why that is and if I need to I thought I could just force it to work with the following code. 

 

 
/*Replace logo Weddings*/
.page-id-431 #branding .mainlogo-img
{
display:none;
}
.page-id-431 .mainlogo-link
{
width:662px;
height:100px;
background: url(../wp-content/uploads/2013/02/elimergel_logo_again.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) 
{
.page-id-431 .mainlogo-link {
background: url("../wp-content/uploads/2013/02/elimergel_logo_again-2x.png") no-repeat;
background-size: 662px 100px;
}
}

 

 

But alas no go. Ill keep hammering at it. 

 

If you use the code on the top though you can serve two different images one for HiDPI screens one for regular old computer screens. If anyone can help me with my photography page let me know Ill be working on it till I get it fixed. 

[James B]

@Sp1te hi there, sometimes in child themes you need to use an override for the css. Check out the 'pagelines overrides' section in - http://support.pagel...ion/custom-css/