Создание реагирующих нескольких divs

Question

У меня есть страница, где я показываю 4 изображения - по 2 на 2 в каждой строке. Я пытаюсь сделать их отзывчивыми, когда страница открыта на мобильном устройстве, но я не могу понять, как это сделать.

Так что у меня этот HTML

<div id="wrapper"> 
    <div id="main-content"> 
    <div id="img-row" > 
     <a href=""><button class="button"> Ask </button> </a> 
    </div> 
    <div id="img-row"> 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
    </div> 
    <div id="img-row"> 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> 
    </div> 
    </div> 
</div> 

И устанавливаемые сотовые

#wrapper { 
    margin: 0 auto; 
    width: 960px; 
} 
#main-content { 
    background: #fff; 
    padding: 7px 7px 7px 7px; 
    width: 946px; 
    min-height: 400px; 
    float: left; 
} 

.images { 
    text-align: center; 
    padding: 15px 15px; 
    position: relative; 
    vertical-align: middle; 
    display: inline; 
    width: 430px; 
    margin: 10px 0; 
} 
#img-row { 
    display: block; 
    margin-top: -15px; 
    position: relative; 
    height: auto; 
    max-width: auto; 
    overflow-y: hidden; 
    overflow-x: auto; 
    word-wrap: normal; 
    white-space: nowrap; 
    text-align: center; 
} 
#img-row > a { 
    position: relative; 
} 
#img-row:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 
.button { 
    display: block; 
    background-color: #bbb; 
    margin: 10px; 
} 
button.button { 
    width: 570px; 
    margin-left: 182px; 
    height: 40px; 
    font-size: 30px; 
} 
.wp-caption-text { 
    display: block; 
    position: absolute; 
    width: 100%; 
    color: white; 
    left: 0; 
    top: -30px; 
    bottom: 1px; 
    padding: 5px; 
    font-weight: bolder; 
    z-index: 2; 
    font-size: 40px; 

} 

Теперь я попытался добавить в CSS media screen запросе, но нет никакой разницы. Для публикации изображений я подготовил JSFiddle демо.

Вот демо, как это выглядит: https://jsfiddle.net/vxu7rvv7/

Я пробовал несколько решение от других потоков здесь, но я не могу заставить его работать. На самом деле свойство медиа-экрана происходит из другого потока.

Может ли кто-нибудь мне помочь здесь?

Answer 1

Лучший способ будет использовать некоторые требования системы. Замените css. Я надеюсь, что это сделает ваши изображения восприимчивыми для всех устройств.

<div id="wrapper"> 
    <div id="main-content"> 
    <div id="img-row" > 
     <a href=""><button class="button"> Ask </button> </a> 
    </div> 
    <div id="img-row"> 

     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
     </div> 
     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
     </div> 

    </div> 
    <div id="img-row"> 
     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
     </div> 
     <div class="img-item"> 
      <a href="#"><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
     </div> 
    </div> 
    </div> 
</div> 

И использовать этот CSS

#wrapper { 
    margin: 0 auto; 
    max-width: 960px; 
} 

#main-content { 
    background: #fff; 
    padding: 7px; 
    width: 100%; 
    min-height: 400px; 
    box-sizing: border-box; 
} 

.img-item { 
    padding: 15px 15px; 
    width: 50%; 
    margin: 10px 0; 
    float: left; 
    box-sizing: border-box; 
    position: relative; 
} 

.images { 
    width: 100%; 
    position: relative; 
    z-index: 50; 
} 

#img-row > a { 
    position: relative; 
} 

#img-row { 
    overflow: hidden; 
} 

#img-row:after { 
    content: ""; 
    position: absolute; 
    display: block; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

.button { 
    display: block; 
    background-color: #bbb; 
    margin: 10px; 
} 

button.button { 
    width: 250px; 
    margin: 25px auto; 
    height: 40px; 
    font-size: 30px; 
} 

.wp-caption-text { 
    display: block; 
    position: absolute; 
    width: 100%; 
    color: #ffffff; 
    top: 50%; 
    left: 0; 
    right: 0; 
    text-align: center; 
    font-weight: 700; 
    z-index: 200; 
    font-size: 40px; 
    transform: translateY(-50%) 
} 

@media screen and (max-width: 767px) { 
    .img-item { 
     padding: 7px; 
     width: 100%; 
    } 
} 

JSFiddle

Answer 2

сначала вам нужно изменить ширину #wrapper на авто, и изменить изображения от встроенного в блок, поэтому в основном ваш медиа-экран CSS должен выглядеть следующим образом:

@media screen and (max-width: 480px) { 
    #wrapper { 
     height: auto; overflow: hidden; 
     width: auto; 
    } 
    .images { 
    display: block; 
    width:100%; 
    padding: 0; 
    } 
    #main-content {  
     float: none; 
     margin-right:0; 
     width:auto; 
    } 
    button.button { 
     width: 100%; 
     margin: 15px 0; 
    } 
    .img-row > a { 
     display: block; 
    } 
    .wp-caption-text { 
     /* this will center the title in the vertically*/ 
     top: 50%; 
     transform: translateY(-50%); 
     /*------------------------------------------*/ 
     padding: 0; 

    } 
} 

PS

не используют один и тот же идентификатор для нескольких элементов, но вместо этого используйте класс # img-row для .img-row и снимите нижний: 1x; от .WP-заголовка-текста

Updated JSFIDDLE

Answer 3

попытаться использовать максимальную ширину: 100%, и ряд изображений есть два изображения, поэтому, возможно, изображение обязательно должно быть не более ширины: (< 50%)?

#wrapper { 
 
    margin: 0 auto; 
 
    max-width: 960px; 
 
} 
 
#main-content { 
 
    background: #fff; 
 
    padding: 7px 7px 7px 7px; 
 
    max-width: 946px; 
 
    min-height: 400px; 
 
    float: left; 
 
} 
 

 
.images { 
 
    vertical-align: middle; 
 
    padding: 0px 15px 15px 15px; 
 
    max-width: 45%; 
 
    margin: 10px 0; 
 
} 
 
#img-row { 
 
    display: block; 
 
    margin-top: -15px; 
 
    position: relative; 
 
    height: auto; 
 
    max-width: auto; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    word-wrap: normal; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 
#img-row > a { 
 
    position: relative; 
 
} 
 
#img-row:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    max-width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.button { 
 
    display: block; 
 
    background-color: #bbb; 
 
    margin: 10px; 
 
} 
 
button.button { 
 
    max-width: 570px; 
 
    margin-left: 182px; 
 
    height: 40px; 
 
    font-size: 30px; 
 
} 
 
.wp-caption-text { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    color: white; 
 
    left: 0; 
 
    top: -30px; 
 
    bottom: 1px; 
 
    padding: 5px; 
 
    font-weight: bolder; 
 
    z-index: 2; 
 
    font-size: 40px; 
 

 
}

<div id="wrapper"> 
 
    <div id="main-content"> 
 
    <div id="img-row" > 
 
     <a href=""><button class="button"> Ask \t </button> \t </a> 
 
    </div> 
 
    <div id="img-row"> 
 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 1</figcaption></a> 
 
     <a href=""><img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 2</figcaption></a> 
 
    </div> 
 
    <div id="img-row"> 
 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 3</figcaption></a> 
 
     <a href=""> <img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" class="images" /><figcaption class="wp-caption-text">Title 4</figcaption></a> 
 
    </div> 
 
    </div> 
 
</div>