レスポンシブデザインに対応させたい

前提・実現したいこと

webサイトをレスポンシブデザインに対応させたいです。

lessonクラスのwidthを50%や100%に指定しても、見た目が変わりません。

どのように指定すればよいのでしょうか。

よろしくお願いいたします。

該当のソースコード

・index.html

<div class="middle-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p>HTML&CSS</p>
            </div>
            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
        </div>
      </div>
    </div>

・style.css

.middle-wrapper {
  height: 580px;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  color: #5f5d60;
  padding-top: 80px;
  font-weight: normal;
}

.lessons {
  display: flex;
  margin-top: 50px;
}

.lesson {
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 75px;
  width: 100%;
  color: white;
}

.text-contents {
  color: #b3aeb5;
  font-size: 13px;
  width: 80%;
  margin: 0 auto;
  margin-top: 15px;
}

・responsive.css

@media screen and (max-width: 1000px) {
  .heading {
    font-size: 20px;
  }

  .lesson {
    width: 50%;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 670px) {
  .lesson {
    width: 100%;
  }
}

kei344

2020/01/15 12:03

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

mahiro_t

2020/01/15 12:42 編集

kei344様ご指摘ありがとうございます。コードをコードブロックで囲ませていただきました。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.lessons {
2  display: flex;
3  margin-top: 50px;
4  flex-wrap: wrap;/* ADD */
5}
6```**動くサンプル：**[https://jsfiddle.net/bc8zjt3L/](https://jsfiddle.net/bc8zjt3L/)
7
8---
9
10ちなみに`height: 580px;`のような指定はレスポンシブには向かないので、組み方をい考えたほうがよいと思います。