Resizing items with a media query not working

Question

I'm building an application that have to work on "small" screens (1024*768) or higher resolution screen.

I have in the application a page that have some items presented in two columns. But on "small" screens, the width of the items is too large to keep a good layout, so I want to reduce the number of columns to one. The columns are build with a <ul> containing <li> with float:left attribute (this is actually a jQuery Sortable plugin output).

My behavior of the page is to allow users to drag and drop items between a "source" list and "target" list in order to select items (this is working and if it can help, I can paste the code).

To solve this issue, I have tried to set up a media query.

In my css file I have :

.sourceItems, .targetItems {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    background: #eee;
    padding: 5px;
    border: solid 1px black;
    height: 400px;
    overflow: auto;
}

.sourceItems {
    width: 530px;
}

.targetItems {
    width: 280px;
}

    .sourceItems li, .targetItems li {
        border: solid 1px black;
        float: left;
        margin: 4px;
        padding: 4px;
        width: 220px;
        min-height: 10px;
        cursor: move;
        background-image: url('/_layouts/images/personresult.gif') !important;
        background-repeat: no-repeat !important;
        padding-left: 20px;
        background-color: #DFEFFC;
        background-position: left center !important;
    }

        .sourceItems li.user, .targetItems li.user {
        }

        .sourceItems li.entity, .targetItems li.entity {
            background-position: left center;
            border: solid 1px black;
            float: left;
            margin: 4px;
            padding: 4px;
            width: 200px;
            background-image: url('/_layouts/images/peopletitle.png') !important;
            font-size: 1.1em;
            height: 50px;
            cursor: move;
            padding-left: 40px;
            background-color: #CCFF99;
            background-repeat: no-repeat !important;
            vertical-align: middle;
        }

@media screen and (max-width: 1024) {
    .sourceItems {
        width: 200px;
    }

    .targetItems {
        width: 200px;
    }

        .sourceItems li, .targetItems li {
            margin: 2px;
            padding: 2px;
            width: 180px;
            min-height: 10px;
            background-image: url('/_layouts/images/personresult.gif') !important;
            -moz-background-size: 50%;
            -o-background-size: 50%;
            -webkit-background-size: 50%;
            background-size: 50%;
            background-repeat: no-repeat !important;
            padding-left: 10px;
            font-size: 1.1em;
        }

            .sourceItems li.user, .targetItems li.user {
            }

            .sourceItems li.entity, .targetItems li.entity {
                -moz-background-size: 50%;
                -o-background-size: 50%;
                -webkit-background-size: 50%;
                background-size: 50%;
                margin: 2px;
                padding: 2px;
                width: 180px;
                background-image: url('/_layouts/images/peopletitle.png') !important;
                font-size: 1.1em;
                height: 30px;
                padding-left: 20px;
            }
}

However, this makes not difference when the page load (the element is always two columns large).

Don't know if it can help, but here is the dump of the DOM (from the IE developer tools) :

<UL class="sourceItems droptrue ui-sortable" jQuery172019945692622544986="151">
  <LI class="ui-state-default entity" jQuery172019945692622544986="75">some item 1</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="76">some item 2</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="77">some item 3</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="78">some item 4</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="79">some item 5</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="80">some item 6</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="81">some item 7</LI>
  <LI class="ui-state-default entity" jQuery172019945692622544986="82">some item 8</LI>
</UL>
<UL class="targetItems droptrue ui-sortable" jQuery172024919617247411335="152"></UL>

Here is a screenshot of the output with a "large screen":

Here is a screenshot of the output with a "small screen":

Here is a screenshot of the desired output on a "small screen" (tweaked the dom using IE dev tools to produce the screenshot:

I'd appreciate any help that may help to solve this issue.

Answer 1

You are missing length prefix px/cm/in in

@media screen and (max-width: 1024) {
                              ^^^^ // Missing px   

DEMO - (Not Working)

It should be:

@media screen and (max-width: 1024px) {
                                  ^^ // Added px

DEMO - (Working)

SEE REFERENCE