セクションのモバイルビューが奇妙に見える

モバイルビューレイアウトの問題が発生しました。モバイル経由でサイトを表示すると、セクションがフルサイズの画像を表示する代わりに縮小されて積み重ねられます。モバイル経由で見たときにボックスが互いの上になるように修正するにはどうすればよいですか？私はブートストラップを使用しています。あなたは、あなたがCSSで修正することができます。図や絵が固定hieghtにネストされている他の要素を与えたことセクションのモバイルビューが奇妙に見える

<section class="health" id="health"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="section-title st-center"> 
          <h3>Places to exercise</h3> 
         </div> 
         <div class="grid"> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2><span>EAST COAST PARK</span></h2> 
            <p>Long stretch of running and cycling/skating paths, it’s one of Singapore’s best spots to go jogging or bike riding.</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section>

出典

2016-05-10 xtjnrchris

.health { パディング：2em; } 。グリッド図{ 位置：相対; float：left; オーバーフロー：非表示。 text-align：center; カーソル：ポインタ; 幅：33.33333333％; } .grid figure img { 位置：相対; display：ブロック; 最小高さ：100％; 最大幅：100％; 不透明度：1; -webkit-transition：不透明度0.3s、-webkit-transform 0.3s立方体ベジェ（0.645,0.045,0.355,1）; 遷移：不透明度0.3s、変換0.3s立方体ベジェ（0.645,0.045,0.355,1）。 } – xtjnrchris

あなたのCSSを含めてくれてありがとうございますが、コメントとしてではなく、実際の質問テキストに追加してください。これはあまり読まれず、コメントが非常に簡単に失われる可能性があります。 – Serlite

それはあるかもしれないこととheight: auto;

出典

2016-05-10 15:00:21 Simon

こんにちは、私は最大高さの100％を使用しました。 autoに変更しましたが、同じエラーが表示されます。。グリッド図{ 位置：相対; float：left; オーバーフロー：非表示。 text-align：center; カーソル：ポインタ; 幅：33.33333333％; } .grid figure img { 位置：相対; display：ブロック; 最小高さ：100％; 最大幅：100％; } – xtjnrchris

これを行う最善の方法は、たとえば、画像のそれぞれにcol-spanを追加することです.3つの画像でcol-span-4を使用すると、デスクトップでお互いにうまく積み重ねることができますが、モバイルビューでは既定のCSSのために自動的に互いに下に落ちるでしょう

  <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/1.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/2.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/3.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/4.jpg" alt=""> 
      </a> 
     </div>

出典

2016-05-10 15:01:20 Phil

セクションのモバイルビューが奇妙に見える

答えて

関連する問題