Question

Как правильно настроить @media only screen ?

у меня сейчас вот так код выглядит

  @media only screen and (min-width: 1366px) { #dispvip3 { display: none;}  #dispvip4 { width:25%;  float:left;}   }  @media only screen and (max-width: 1366px) { #dispvip3 { width:33%;  float:left;}   #dispvip4 { display: none;}  }

Но тут загвоздка. Если экран оказывается ровно 1366 пикселей в ширину то содержимое не отображается вовсе. Тоесть как бы 4-х колоночное отображение уже изчезло а 3-х не появилось ещё.

Answer 1

Более правильно сделать вот так:

 

стили

@media only screen and (min-width: 1366px) {
#dispvip3 {display: none;}
#dispvip4 {
width:25%; 
float:left;
display:inherit!important;} 
}

@media only screen and (max-width: 1366px) {
#dispvip3 {
width:33%; 
float:left;
display:inherit!important;
} 
#dispvip4 {display: none;} 
}

Comments

Этим кодом к сожалению не решается. при размере 1366 материалы задваиваются.  я пока вместо 1366 поставил 1399 цыфру. По сути нечетных разрешений мониторов и ноутов не бывает, по этому по дефолту не будет пустой экран когда зайдут на сайт.

---

Roman Zheludkov,

Ну да, как вариант решения, подойдет.