WordPress的列計數不工作在媒體查詢

我創建我的第一個WordPress網站，我面臨着與我的主題這個問題。我使用的是自定義主題我下載，並在其CSS文件，我有這樣的代碼塊：WordPress的列計數不工作在媒體查詢

... 
@media only screen and (min-width: 700px) { 
    .masonry { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
    } 
} 

@media only screen and (min-width: 900px) { 
    .masonry { 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
    } 
} 

@media only screen and (min-width: 1100px) { 
    .masonry { 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count: 4; 
    } 
    .masonryinside { 
    -moz-column-count: 1; 
    -webkit-column-count: 1; 
    column-count: 1; 
    } 

@media only screen and (min-width: 1280px) { 
    .wrapper { 
    width: 1260px; 
    } 
}

的問題是列數不改變連我的屏幕寬度> 1100這是IMG當我檢查元素：

或者你也可以自己從我的網站看看吧：https://vietani.000webhostapp.com/

來源

2016-12-24 Flying D

哦，我剛剛發現，主題所有者定義的HTML其他一些媒體查詢，以便在一個CSS文件中被忽略了:) –

你缺少一個右花括號爲您1100px媒體查詢

來源

2016-12-24 01:38:19 dzny

是解決方案！但它仍然沒有工作:( –

也可以使用Bootstrap卡。試試這個代碼它的工作原理與不同大小的屏幕

<html lang="en"> 

<head> 
    <title>Contact Button</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <!-- BOOTSTRAP CARDS-->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 

    <style> 
    #width{ 
     width:300px; 
     height:auto; 
    } 

    .card-img-top{ 
     width:300px; 
    } 

    #col{ 
     -moz-column-count: 3; 
     -webkit-column-count: 3; 
     column-count: 3; 
    } 

    @media screen and (max-width:768px) and (orientation:portrait){ 
     #col{ 
     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 
     } 
    } 

    @media screen and (max-width:414px) and (orientation:portrait){ 
     #col{ 
     -moz-column-count: 1; 
     -webkit-column-count: 1; 
     column-count: 1; 
     } 
    } 
    </style> 
</head> 
<body> 
    <div class="card-columns" id="col" style="margin:0px 40px;"> 
     <div class="card" id="width"> 
      <img src="trolltunga.jpg" alt="" class="card-img-top"> 
      <div class="card-block"> 
       Text here 
      </div> 
     </div> 

     <div class="card" id="width"> 
      <div class="card-header"> 
       Header here 
      </div> 
      <div class="card-block"> 
       Text here 
      </div> 
     </div> 

     <div class="card" id="width"> 
      <img src="trolltunga.jpg" alt="" class="card-img-top"> 
      <div class="card-block"> 
       Text here 
      </div> 
     </div> 

     <div class="card" id="width"> 
      <div class="card-header"> 
       Header here 
      </div> 
      <div class="card-block"> 
       Text here 
      </div> 
     </div> 

     <div class="card card-block card-inverse card-primary text-xs-center"> 
      <blockquote class="card-blockquote"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> 
       <footer> 
       <small> 
        Someone famous in <cite title="Source Title">Source Title</cite> 
       </small> 
       </footer> 
      </blockquote> 
     </div> 

     <div class="card" id="width"> 
      <div class="card-header"> 
       Header here 
      </div> 
      <div class="card-block"> 
       Text here 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-12-24 03:33:47

我不打算修改主題，我只是想讓它與4列一起工作，這讓我感到困惑的是，當我放大（<900像素），它工作正常，什麼與1100px的問題？ –

WordPress的列計數不工作在媒體查詢

回答

相關問題