Отзывчивый UL-список изображений

Question

Привет Я пытаюсь сделать этот UL отзывчивым в разрешении 1024x768.

Это список:

<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> 

Это оригинальный 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; 
} 

и это запрос СМИ:

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

Я хочу, чтобы фотографии, чтобы быть в два столбца вместо четырех, когда разрешение браузера 1024x768.

--- Получил это на работу! Спасибо за ваши ответы!

Answer 1

Следующее должно сделать это. Если нет, попробуйте сделать скрипку, чтобы мы могли видеть, что может мешать. Добавьте имена классов, где это необходимо.

li { 
    width:25% 
}  

@media only screen and (max-width: 1024px) and (min-width: 768px) { 
    li { 
     width:50%; 
    } 
} 

Answer 2

Вы меняете img на медиа-запрос, но не на li.

Поскольку img содержатся в личном запросе вашего текущего медиа, он работает не так, как ожидалось.

Вам нужно добавить медиа-запрос к ширине Ли

@media only screen and (max-width: 1024px) and (min-width: 768px) { 

    .beforeafterpics li{ 
     width: 50%; 
    } 
} 

HERES THE FIDDLE

Я не уверен, где ваш UL находится на странице, но, например, ради я использовал 100% для Ширина UL.

Также стоит отметить, что вы используете inline-block для своих литов. Чтобы они сидели рядом друг с другом, используя ширину 50%, вам нужно исправить проблему белого пространства, которая возникает с помощью встроенных блоков. В моем примере я добавил:

.beforeafterpics { 
    font-size: 0; 
} 

, чтобы исправить это для примера.

Для получения дополнительной информации о рядном блоке белого пространства выдачи и различных способах, чтобы исправить это:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

В оригинальном CSS поплавка ваша детали Ли оставила (лучше для кросса-браузера, а)

Оригинальный CSS:

.beforeafterpics li{float:left; display:block; list-style-type: none;} 

Затем в мультимедийном запросе очистить третий элемент списка, чтобы привести его вниз.

Медиа CSS запрос:

.beforeafterpics li:nth-child(3){clear:left;} 

Answer 4

Попробуйте изменить свой медиа-запрос, например, так:

@media only screen and (max-device-width : 1024px) { 
    .ba-bg { 
     width: 50%; 
    } 
    li.nth-child(2):after { 
     content:"\a"; white-space:pre; 
    } 
}