Adam Pash Adam Pash - 5 months ago 20
HTML Question

Responsive images working in Chrome but not Firefox

I'm working on a web site that uses responsive images and a couple of fixed sidebars (first attempt at responsive design). The problem: The responsive images are working as expected in Chrome, but they aren't working at all in Firefox. Here's an example of the page in question:

http://ellenflaherty.com/projects/carland/

Any idea why the discrepancy?

Note: The responsive images aren't working when the browser is over 1000px. They actually are working as expected when things adjust for tablet/phone-sized screens.

Answer

I've had a look and in terms of Firefox I suggest you remove your display: inline-block and float: left; when your browser window reaches is re-sized to a larger screen size, like the 1000px that you have mentioned in your question, and then for smaller screen sizes you can reintroduce the display and float to make sure the page displays as it should.

I'm attaching an image below the code of what it looks like after the display and float are removed on a large screen.

.projectimg {
    bottom: 0;
    /* display: inline-block;  REMOVE THIS */
    /* float: left; /* REMOVE THIS */
    height: auto;
    margin-left: 220px;
    margin-right: 30px;
    overflow: hidden;
    width: 80%; /* THIS */
}

Firefox screen of page after float and display are removed on large screen.

Hope that helps