CSSの応答ボタン

ここでは応答ボタンに関する多くの回答がありますが、私の問題を解決するための解決策は見つかりませんでした。CSSの応答ボタン

私があなたを助けてくれることを願っています！

ここには3つのボタンがあります。私にそれを反応させるようにしてください。

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important;} 
.btn ul {margin:0;padding:0} 
.btn li{display:inline;margin:30px;padding:0;list-style:none;} 
.icosite,.whitepaperlink,.watchyt{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;opacity:.95;border:0;transition:all .2s ease-out} 
.icosite {background-color:#6829b7; -moz-border-radius: 10px; 
-webkit-border-radius: 10px;} 
.whitepaperlink {background-color:#606060; -moz-border-radius: 10px; 
-webkit-border-radius: 10px;} 
.icosite:hover {background-color:#29b765;color:#fff; opacity:1; -moz-border-radius: 20px; 
-webkit-border-radius: 20px;} 
.whitepaperlink:hover {background-color:#29b765;color:#fff; opacity:1; -moz-border-radius: 20px; 
-webkit-border-radius: 20px;} 
.icosite:before {content:&#39;\f064&#39;;font-size: 1.5em;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:18px;font-family:fontawesome;transition:all 0.5s ease-out;} 
.whitepaperlink:before {content:&#39;\f1c1&#39;;font-size: 1.5em;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:18px;font-family:fontawesome;transition:all 0.5s ease-out;} 
.watchyt,.whitepaperlink,.icosite{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;opacity:.95;border:0;transition:all .2s ease-out} 
.watchyt {background-color:#ff0000; -moz-border-radius: 10px; 
-webkit-border-radius: 10px;} 
.watchyt:hover {background-color:#29b765;color:#fff; opacity:1; -moz-border-radius: 20px; 
-webkit-border-radius: 20px;} 
.watchyt:before {content:&#39;\f16a&#39;;font-size: 1.5em;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:18px;font-family:fontawesome;transition:all 0.5s ease-out;}

ありがとうございます！

出典

2017-10-31 Lays White

3つは何ですか？あなたのHTMLはどうですか？レスポンシブで何を達成したいですか？彼らはすべて応答的にお互いの下にいるべきですか？私たちに何かplsを表示 – Dirk

ようこそスタックオーバーフロー - あなたを持っていいです。 [良い質問をするにはどうすればいいですか？]（https://stackoverflow.com/help/how-to-ask）と[最小限の完全かつ検証可能なサンプルを作成する方法]（https：// stackoverflow。 com/help/mcve）を使用して、Stack Overflowsのコンテンツを可能な限り高いレベルに保ち、適切な答えを得る機会を増やします。 – Axel

細かいことは申し訳ありません）すべてが一列に並んでいなければなりません。しかし、これが大画面の表示を変えなければ、それらはすべて互いに下にあるかもしれません。 –

あなたが応答性のあるボタンを言うときは、モバイルとデスクトップでよく見えるボタンを要求していると仮定します。この場合、メディアクエリを使用して、使用しているデバイスのタイプに基づいてボタンのサイズを変更します。私もあなたが使用することをお勧めしません！重要なすべての例）

@media screen and (max-width: 768px) { 

    p { 
     font-size: 16px; 
    } 


}

出典

2017-10-31 00:27:58 DannyV

はい、それは私が意味するものです！あなたの素早い答えをありがとう。しかし、私はコード内のどこにコードを追加しなければならないのか分かりません。 –

はい、もちろんです。メディアクエリはCSSの機能です。他の要素と同じように、CSSファイルのどこにでも追加できます。個人的には、最後に入れています。したがって、通常のp要素を20pxのフォントサイズで作成します。次に、メディアのクエリでは、最大幅が768pxのときに16pxを入力します。メディアクエリには、h1やpのように複数の要素を配置することもできます。 – DannyV

はい、私はあなたが意味することを理解していると思います。しかし、実際には、テンプレートは反応的であり、モバイルデバイス上でサイズを変更しないこの新しいボタンには問題があります。私はこのCSSコードで何かを正確に追加する必要があると思う。 –

ここに私が追加されたコードです！

@media screen and (max-width: 1200px) { 

    .btnpost,.icosite,.whitepaperlink,.watchyt { 
display: inline-block; 
vertical-align: bottom; 
margin: auto; 
display:flex; 
justify-content:center; 
align-items:center; 

    } 


}

出典

2017-10-31 02:03:59

答えて

関連する問題