Grow your CSS skills. Land your dream job.

Images disappear on retina displays

  • # June 22, 2013 at 12:09 am

    Hey Everyone, hope you can help!

    So I am working on a new portfolio/brand website and I am use the [Retina.js](http://retinajs.com/ “”) script so that 2x images get pulled in and look better on retina displays.

    I am also using this [JQuery image caption](http://alijafarian.com/jquery-image-hover-captions/ “”) script for my thumbnails to display content when you hover over the image.

    Everything working great.. until… you run the website on any type of retina display. When you load the site on a retina display the JQuery image thumbnails show up for a second and then disappear.

    Since the 2x header images load just fine, the problem has to be within the JQuery.. I just can’t figure it out.

    Here is a link to the site: [www.phidiasgold.com/new/portfolio.php](http://www.phidiasgold.com/new/portfolio.php “”)

    # June 22, 2013 at 10:21 pm

    The img height attribute is being set to 0. Not sure why that is happening but it’s a clue as to where to look.

    # June 22, 2013 at 10:30 pm

    I would try adding the img demensions into your css stylesheet.
    img.yourClass{width:320px; height:220px;}

    Also… really big one here… validate your code. Your site is doing a lot of big NO NO’s that will cause js to get mad and quit.

    check this link… and clear most of this stuff up. Then you will start to see your troubles go away. [http://bit.ly/187g6xI](http://bit.ly/187g6xI “Validate”)

    # October 15, 2014 at 11:11 pm

    Hi artbywesley,

    I’m facing the same image disappearing issue as you. Did you find out a proper solution for this issue. If so please share with us.

    Thank you

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".