ヘッダー画像、テキスト、ボタンをレスポンシブにする方法

Question

Bootstrap 5 を使用して Web サイトを作成しています。ウェブサイトのヘッダーでは、Bootstrap の Carousel をヘッダーに使用しています。カルーセル画像では、テキストやボタンを表示することもできます。画像、テキスト、ボタンをレスポンシブにしたい。メディアクエリを使ってみましたがやり方がわかりません。

テスト.html

リーリー

テスト.css

リーリー

リーリー リーリー

Answer 1

メディア クエリは次のように記述されます:

リーリー

ブートストラップを使用する場合、最後に ! important を追加して読み込む必要があることがわかりました:

リーリー

メディア クエリについて詳しく知りたい場合は、次の記事を参照してください: https://www.w3schools.com/css/css3_mediaqueries.asp

(もちろん、フォントの色を変更したくない場合もあります。これは単なる例です。)