WordPressの列数がMedia Queryで機能しない

私は最初のWordPress Webサイトを作成していますが、私はこのテーマに直面しています。私がダウンロードしたカスタムテーマを使用していて、そのCSSファイルに私はこのコードブロックを持っている：WordPressの列数がMedia Queryで機能しない

... 
@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; 
    } 
}

問題は、列数は、これは、IMGであっても、私の画面幅は> 1100で変更しないで

それとも、私のサイトからそれを自分で見ることができます：私は要素の検査時にhttps://vietani.000webhostapp.com/

出典

2016-12-24 Flying D

ああ私は、CSSファイルの1が無視されましたので:) –

をあなたは1100pxメディアクエリー

ための閉じ中括弧が欠落しています

出典

2016-12-24 01:38:19 dzny

はい、テーマの所有者は、HTML内の他のメディアクエリーを定義している解決策を見つけました！しかし、それでも動作していない:( –

ブートストラップカードも使用できます。それは異なるサイズのスクリーンで動作するこのコードを試してみてください

<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つの列で動作するようにしたい、私は混乱させるものは、私は（900px未満）をズームし、 1100pxの問題ですか？ –

WordPressの列数がMedia Queryで機能しない

答えて

関連する問題