I have set up a test site for some responsive images.
The images are set with a width of 100% and resize between 240px and 320px wide. I also have media queries that make the break points for these widths.
What I’m having trouble with is when I resize the browser dynamically. While Chrome and Safari handle the resizing and breakpoints perfectly, FF and Opera display some weird float issues at the breakpoints.
Here is the media queries for one of the breakpoints that displays weird:
@media all and (min-width: 641px) and (max-width:719px) {
#main {
width: 640px;
margin: 0 auto;
}
.post {
width: 50%;
}
}
@media all and (min-width: 720px) and (max-width:960px) {
.post {
width: 33.3333333%;
}
}
and here is a comparison image of the browsers at 720px wide. At this breakpoint should have just switched from 2 at 320px wide to 3 at 240px wide.
Chrome: http://cl.ly/DuX8
Firefox: http://cl.ly/Dugp
(have used website clips for example)
Any Ideas?





Home
