2017-09-18 4 views
0

には適用しない:マテリアライズ対応する画像は、私がマテリアライズ中にカードを持っているカード

<div class="row"> 
    <div class="col s12 m7"> 
     <div class="card large"> 
     <div class="card-image"> 
      <img class="responsive-img" src="img/xv-chars.png"> 
     </div> 
     <div class="card-content"> 
      <p>I am a very simple card. I am good at containing small bits of information. 
      I am convenient because I require little markup to use effectively.</p> 
     </div> 
     </div> 
    </div> 
    </div> 

それが参照する画像は、私が上でそれを表示するには、それが幅を縮小されていない応答-IMGクラスにもかかわらず、1680px広いですモバイル機器。代わりに、フルサイズで画像を表示しているため、ユーザーは右にスクロールします。

これはメインページのスクリーンショットです。右にスクロールすると、カードに画像が正しく表示されるようにする方法を知っていますか?

on the main page

scrolling to the right

EDIT:

私はカードに大量のテキストを追加し、それは物事を変え、画像がすべての画面サイズで正しく表示さ今、しかしテキストがランダムに表示さと斑目。実際のテキストの長さは4文です。私はそれを約半分に下げるとイメージの問題が発生します。

Text jumbled

答えて

0

ダサくのうちすべてのものを通してのナビゲーションバーに閉じられていない、ありました。それを閉じて、テキストと画像は完全に応答しています。

関連する問題