Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Adam Smallman
Adam Smallman
4,182 Points

blurry image on mobile phone

Why when I look at my website on mobile phone is my logo blurry ?

Any ideas ?

Mark Amarasekara
Mark Amarasekara
4,937 Points

The first comment is right. I would also consider if you are viewing zoomed in on your phone. The resolution (making the image bigger) will solve this you don't want to go made and make it a massive file size. And media queries will definitely allow you to provide a choice based on the size you need. But blurry usually means that the image is too small for the viewing resolution. So whether zoomed in or displaying as a % of the area will cause this.

For a quick fix whilst you get the media query sorted out you should ensure that you display the image at a fixed size (the size of the file or slightly smaller) that will stop it although may not look quite as you intended until its properly fixed (may look small in its space). I'd personally rather a small clean image to a blurry one though.

1 Answer

I am guessing that the phone is high resolution. Try serving higher resolution images. (Use media queries) Most often serving the same image at twice the size helps.

This can be a confusing topic. I know treehouse covers this in the CSS foundations course. I believe it will be in the media queries section. -> http://teamtreehouse.com/library/css-foundations