レスポンシブに対応できません

Question

PC画面から携帯画面に変更させたいのですが。。。

PC場ではこのように画像が横に三つになっているのですが、携帯画面様で全て1列にしたいのですが、やり方がわかりません。
レスポンシブに対応できる様にするにはどうしたら良いでしょうか。

該当のソースコード

    <div class="works-wrapper">
      <h2>WORKS</h2>
      <div class="line-bottom"><p></p></div>

      <div class="works-box">
        <div class="works-boxmin">
        <div class="img-box">
          <img src="CSS/img/architecture-4178938_1920.jpg" alt="" width="400px" height="400px">
          <p>Liberal Works</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/bird.jpg" alt="" width="400px" height="400px">
          <p>Team grey</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/chess-4167217_1920.jpg" alt="" width="400px" height="400px">
          <p>Gooogle</p>
        </div>
        </div>
      </div>
      <div class="works-box">
        <div class="works-boxmin">
        <div class="img-box">
          <img src="CSS/img/dubrovnik-4169379_1920.jpg" alt="" width="400px" height="400px">
          <p>Slack</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/house-4176711_1920.jpg" alt="" width="400px" height="400px">
          <p>Acro Force</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/koblenz-4179244_1920.jpg" alt="" width="400px" height="400px">
          <p>Wework</p>
        </div>
        </div>
        </div>
        <div class="works-box">
          <div class="works-boxmin">
        <div class="img-box">
          <img src="CSS/img/landscape-4147294_1920.jpg" alt="" width="400px" height="400px">
          <p>Cyber Agent</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/lizards-4177874_1920.jpg" alt="" width="400px" height="400px">
          <p>Ascope</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/night-4170013_1920.jpg" alt="" width="400px" height="400px">
          <p>Ascope</p>
        </div>
       </div>
      </div>
      <div class="more">
        <a href="#">MORE</a>
      </div>
    </div>

.works-box {
  width: 100%;
  float: left;
}

.works-boxmin {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-box {
    float: left;
    margin: 20px;
    position: relative;
}

.img-box p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
}

.works-wrapper .more {
  width: 100%;
  height: 369px;
  float: left;
  position: relative;
}

.more a {
  padding: 22.18px 93px 22.82px 94px;
  border: 3px solid #FFFFFF;
  position: absolute;
  bottom: 147px;
  left: 0; right: 0;
  text-align: center;
}

* {
  padding: 0;
  margin: 0;
}

li {
 list-style: none;
}

body {
  width: 100%;
  font-family: "A-OTF 新丸ゴ Pro";
  color: #FFFFFF;
  background-color:#1D1D1D;
}

h1 {
  font-family: "A-OTF 新丸ゴ Pro";
  font-size: 70px;
}

h2 {
  margin: 0;
  font-size: 55px;
  text-align: center;
}

h3 {
  margin: 0;
  font-size: 35px;
}

p {
  font-size: 24px;
}

a {
  font-size: 24px;
  color: #FFFFFF;
  text-decoration: none;
}

ご回答のほどよろしくお願いいたします。

Comments

[m.ts10806]

>ご回答のほどよろしくお願いいたします。
これやめませんか？これがあることで避けたくなる。それよりも調べたこと試したことを具体的に記載して質問を充実させてください。「わからない」だけでは調べたこと試したことがわかりませんし、今携帯画面でどうなっているかわかりません。
複数列→１列のレスポンシブであれば基本形でもあるので調べれば幾らでも出てきそうに思います。
そもそも根本的にレスポンシブが全くなされてなさそうなコードですし。

[yasutomi]

> ご回答のほどよろしくお願いいたします。
どう見ても丸投げです。本当にありがとうございました。

Answer 1

viewportを設定してMedia Queriesでデザインを切り分けましょう。
HTML/CSSの入門書を買って基礎から勉強するのがお勧めです。

【viewportを設定して正しく見えるように整える-htmlとcss3-ホームページ制作のアテンド｜新潟・長岡｜SEO・WEBデザイン】
https://www.attend.jp/html_170720

【Media Queriesの指定について - Qiita】
https://qiita.com/knml/items/c94dc493571dd4127d43

Answer 2

メディアクエリも使ったほうがいいですが、これでとりあえず幅が狭ければ1列になるでしょう

.works-boxmin {
  flex-wrap: wrap;
}

https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap