Strange chrome media queries behaviour

Question

I have a layout that breaks at 500px using floats and inline-blocks to shift elements. But chrome(40) does not render them correctly after breaking from smaller to larger size.

Here's the initial mobile layout

Expected layout on resize

Incorrect result

The div containing edit/delete buttons is displayed inline-block and floated right, but does not stack along the 'tags'.

div.link-div div.edit-delete {
    display: inline-block;
    float: right;
    background-color: #3498db;
}

Complete CSS JSFiddle.

My break point is between mobile rotations so the browser will resize. This works fine for FF, IE. Is something wrong in CSS? Please give some workaround.

Answer 1

Well, a way to solve the problem would be adding a "float: left;" to the anchor Tags, to make sure it doesn't occur. You can wrap them in a div and 'float' that div left in opposition to the "edit-delete" div.

Here is your JSFiddle edited. I created a class to the div called "tags-div", which, on MediaQuery is set to "float:left;" on screen sizes bigger than 500px.

@media screen and (min-width: 501px) {
.tags-div {
    float: left;
}