このdivを反応させる

-2

誰かがメディアクエリを使用してこのdivを反応的にする方法を教えてください。スポンサーのロゴが貼られた実質的に200pxの高い部門です。私はそれが敏感であることを望む。現在のところ、ロゴは水平に表示されていますが、モバイル版では、ロゴは上下に重ねて表示されます。このdivを反応させる

<div id="sponsors"> 
     <a id="about" class="smooth"></a> 
     <div class="sponsors"> 
      <div class="row row-centered"> 
       <div class="col-md-4 col-centered" style="margin-top: 40px; "> 
        <img src="img/bridgestone.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;";> 
       </div> 
          <div class="col-md-4 col-centered" style="margin-top: 40px;"> 
        <img src="img/sparco1.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;"> 
       </div> 
          <div class="col-md-4 col-centered" style="margin-top: 10px;"> 
        <img src="img/redbull.png" class="hvr-pulse" style=" width: 300px; margin-bottom: 20px;"> 
       </div> 
      </div> 
     </div> 
    </div> 

#sponsors { 
    width: 100%; 
    height: 200px; 
    background-color: black; 
    background-repeat: no-repeat; 
    background-size: cover; 
    }

出典

2016-05-12 JohnDotHR

だから、ブラックボックスをラップして、モバイルビューでその高さを拡大したいのですか？また、あなたのクラス名で判断すると、あなたはブートストラップを使っていると思いますか？ –

jsfiddleなどを使用して質問にコード例を追加することをお勧めします。正しいことを指し示すために試したことをお知らせください。 –

@Andrew、まさに私が欲しいものです。そして、はい、私はブートストラップを使用しています。 – JohnDotHR

ウェブサイトこのようなmin-heightにごsponsors高さを変更してあります。jsFiddleへ

#sponsors { 
    width: 100%; 
    min-height: 200px; 
}

リンク：https://jsfiddle.net/AndrewL32/e0d8my79/97/ [ダミーの画像が使用]

P.S.は、あなたがフィドルに気付いたかもしれないように、画像をラップするボックスにpaddingを追加することで、あなたが望むものを達成できるのでインラインマージンが削除されます。

出典

2016-05-12 22:52:02

さて、ブラウザが小さくなったので、うまくいきました。しかし、通常のモニター幅のビューでは、divは巨大になりました（約700pxの高さ） – JohnDotHR

Nevermindは動作します。大いに感謝する！ – JohnDotHR

喜んで私はジョンを助けることができました:)あなたの問題を解決するのに役立ちましたら、これを正しい答えとして記入してください。 –

幅が異なる場合にアクションを実行するための幅とメディアクエリを識別するために、メタタグを追加する必要があります。また、ピクセルではなくcss要素にパーセント値を追加すると非常に便利です。

HTML：

<!doctype html> 
<meta name="viewport" content="width=device-width"/>

CSS：

@media screen and (min-width:761px){ 
    div.sponsers{ 
     background-color:black; 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 
}

あなただけのブートストラップを使用することになり応答デザインで出始めていることから、簡単のニーズに合わせてカスタマイズされています使用するのに最適なフレームワークあなたのプロジェクト

一つの良いだけでなくhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

出典

2016-05-12 22:15:26

答えて

関連する問題