Как изменить медиа-запросы

Question

Как изменить медиа-запросы

0

Я нашел некоторый код, но хочу изменить CSS, чтобы показывать только два поля на странице за один раз.

Может кто-нибудь объяснить мне, как изменить медиа-запросы css, чтобы отображать только два окна при изменении размера экрана.

я сделал скрипку, чтобы показать свою работу.

http://jsfiddle.net/pbVLe/

#upload-container-two {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  margin-top: 20px;

}
#upload-container-two ul {
  width: 100%;
  *zoom: 1;
}
#upload-container-two ul li {
  float: left;
  margin-right: -100%;
  width: 93%;
}

#upload-container-two ul li a:hover {
  text-decoration: none;
}

#upload-container-two ul li span {
  font-size: 16px;
  line-height: 22px;
  display: block;
  position: absolute;
  bottom: 13px;
  display: none;
}
#upload-container-two ul li img {
  width: 100%;
}
#upload-container-two ul li:nth-child(2n+0) {
  margin-left: 0%;
  margin-bottom: 5.85%;
  clear: both;
  overflow: hidden;
  *zoom: 1;
}

@media screen and (min-width: 460px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 42.08%;
  }
  #upload-container-two ul li span {
    padding-bottom: 10px;
  }
  #upload-container-two ul li:nth-child(1n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 51.93%;
    margin-bottom: 3.85%;
    clear: none;
  }
}
@media screen and (min-width: 750px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 27.73%;
  }
  #upload-container-two ul li span {
    padding-bottom: 10px;
  }
  #upload-container-two ul li:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 34.29%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+3) {
    margin-left: 68.59%;
    margin-bottom: 3.85%;
    clear: none;
  }
}

@media screen and (min-width: 900px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 20.8%;
  }
  #upload-container-two ul li span {
    padding-bottom: 0px;
  }
  #upload-container-two ul li:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 25.96%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+3) {
    margin-left: 51.93%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+4) {
    margin-left: 77.89%;
    margin-bottom: 3.85%;
    clear: none;
  }
}

user2965875 12 нояб. 2013, в 12:31

Источник

1

Не понимаю, ты не хочешь маржи?
ColoO 12 нояб. 2013, в 12:23
0

Я пытаюсь понять, как отображать 2 столбца, а не 4?
user2965875 12 нояб. 2013, в 13:42

Теги:

html

css

responsive-design

media-queries

1 ответ

Ещё вопросы

Я пытаюсь понять, как отображать 2 столбца, а не 4?

ColoO · Answer 1 · 2013-11-12T12-59-00.000Z

Добавьте два контейнера, чтобы поиграть в ширину float: none. Не забывайте о своем ясном: оба класса.

Мой Кодепен

<div id="main">

<div class="col">
  <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>

    <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>
      <div class="clear"></div>
  </div> 

  <div class="col">
    <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>

  <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>
    <div class="clear"></div>
</div> 

<div class="clear"></div>  
</div>