CSS - Wordpressでサイズを変更するときに重ね合わせる要素がありません

-1

私はいくつかのメディアクエリスタイルルールをワードプレスサイトに適用しています。 1つのセクションには、3 x 4列の2つの行があります。各行には、段落のある画像があります。ページのサイズを変更すると、各画像がそれぞれの段落の上に重ねて表示されます。私はフロントエンドのテストサイトでこれを動作させましたが、私が自分のワードプレスサイトでテストするために来たとき、彼らは横に並べてスタックします。ここでCSS - Wordpressでサイズを変更するときに重ね合わせる要素がありません

は、コードスニペットだ - 私は私のワードプレスのサイトのためのルールの異なるセットを必要とする場合

body { 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    max-width: 100%; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
section#team { 
 
    height: 800px; 
 
    max-width: 100%; 
 
} 
 

 
section#team div.row { 
 
    height: 350px; 
 
} 
 

 
#team .four { 
 
    position: relative; 
 
    width: 320px; 
 
    padding: 30px; 
 
} 
 

 
#team h4 { 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
#team img { 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    bottom: 50%; 
 
    left: 40%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#team p { 
 
    text-align: center; 
 
    font-size: 10px; 
 
    margin-top: 100px; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    div.container { 
 
    float: none; 
 
    margin: 0; 
 
    width: calc(100% - 40px); 
 
    box-sizing: border-box; 
 
    } 
 
    div.column { 
 
    float: none; 
 
    } 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    body { 
 
    max-width: 500px; 
 
    border: 1px dashed #ccc; 
 
    min-height: 400px; 
 
    } 
 
    
 
    section#team { 
 
    float: none; 
 
    height: auto; 
 
    } 
 
    
 
    #team .four { 
 
    width: auto; 
 
    height: auto; 
 
    position: relative; 
 
    transform: translate(-30%, -5%); 
 
    } 
 
}

<body> 
 
    <section id="team"> 
 
    <div class="container"> 
 
     <div class="twelve columns"> 
 
     <h4>MEET THE TEAM</h4> 
 
     <div class="row"> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. 
 
      </p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. 
 
      </p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
      <div class="four columns"> 
 
      <img src="https://static.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="Meet Tim" style="width:100px;height:100px;"> 
 
      <p>Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</br>Praesent sodales, leo at pellentesque pellentesque, nunc erat 
 
       dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body>

私は知らない - ここでは、そのページのPHPコードです -

<?php /* Template Name: Meet the team */ ?> 
<?php get_header(); ?> 

<?php get_template_part('topimage-about'); ?> 
    <section id="team"> 
     <div class="container"> 
      <div class="twelve columns"> 
          <h4>MEET THE TEAM</h4> 
       <div class="row"> 
         <div class="four columns"> 
           <?php if(get_field('team_img_1')): ?> 

           <img src="<?php the_field('team_img_1'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_1'); ?> 
           </p> 
         </div>   
         <div class="four columns"> 
           <?php if(get_field('team_img_2')): ?> 

           <img src="<?php the_field('team_img_2'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_2'); ?> 
           </p> 
         </div> 
         <div class="four columns">  
           <?php if(get_field('team_img_3')): ?> 

           <img src="<?php the_field('team_img_3'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_3'); ?> 
           </p> 
         </div>  
       </div> 

       <div class="row"> 
         <div class="four columns">  
           <?php if(get_field('team_img_4')): ?> 

           <img src="<?php the_field('team_img_4'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_4'); ?> 
           </p> 
         </div> 
         <div class="four columns">  
           <?php if(get_field('team_img_5')): ?> 

           <img src="<?php the_field('team_img_5'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_5'); ?> 
           </p> 
         </div> 
         <div class="four columns">  
           <?php if(get_field('team_img_6')): ?> 

           <img src="<?php the_field('team_img_6'); ?>" style="width:100px;height:100px;" /> 

           <?php endif; ?> 
           <p><?php the_field('team_bio_6'); ?> 
           </p> 
         </div> 
       </div> 
      </div> 
     </div>     
    </section> 

     <?php get_template_part('form'); ?> 





<?php get_sidebar(); ?> 

<?php get_footer(); ?>

更新 - フィドルで提供されているコードがメディアクエリを修正しましたが、現在の主なスタイルは機能しません。これは、フル一気に今どのように見えるかである -

出典

2017-08-02 Mike.Whitehead

あなたが意図しているようにレイアウトを調整するスタイルルールは何も表示されていませんが、ある時点では 'display：block; width = 100％; '#team .four' – UncaughtTypeError

セクション＃team div.row {height：auto;}をメディアクエリーに追加する必要があります。 – Stender

はあなたの行を強制的に動かすだけで、携帯端末の高さは350pxです。次の行がそのポイントまで移動します。あなたはあなたの行に隠されたオーバーフローを追加するとそれを見ることができます – Stender

これは、あなたが正しい道を見つけるのに役立つことを意図している - それは完全ではないが、それはあなたのアイデアを与えるだろう。フィドルをチェックして遊んでください:)

私はフィドルで答えるために、いくつかのコードを掲示しなければなりません。しかし、あなたの問題の一つは、あなたが通常のスタイル

@media screen and (max-width: 480px) { 
    section#team div.row { 
      height:auto; 
    } 
}

Fiddle

それはあなたのために働いたことがうれしいで固定の高さを持っていたことでした。

出典

2017-08-02 10:00:51 Stender

CSS - Wordpressでサイズを変更するときに重ね合わせる要素がありません

答えて

関連する問題