Hi I am trying to make this UL responsive in a 1024x768 resolution. 

This is the list:

```
<ul class="beforeafterpics">
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
    <li><img class="ba-bg" src="IMAGEHERE" width="220px" height="264px" alt="tummy tuck before and after pictures"></li>
</ul>

```

This is the original CSS:

```
.beforeafterpics {
    text-align: center;
}
.beforeafterpics li{
    display: inline-block; 
    list-style-type: none;
}
.ba-bg {background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    padding: 4px;
}

```

and this is the media query:

```
<style type="text/css">
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    {
        .ba-bg {
            width: 50%;
        }
    }
</style> 

```

I want the pictures to be in two columns instead of four when the browser's resolution is 1024x768.

--- Got it to work! Thanks for your responses!