レスポンシブの中間サイズで文字が切れる

前提

レスポンシブ対応をしています。

①中間サイズ時、記事の文字が切れてしまいます。
②携帯サイズ時、タイトルが１行にならない。
③携帯サイズ時、文字、記事、ボタンが真ん中にならない。

お分かりの方おられましたら、
ご教示ください。

実現したいこと

上記を解決したい。

発生している問題・エラーメッセージ

<h2>Feature</h2> <div class="about wrapper"> <article>

    <h3>What is “Coding Basics”?</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
        eu.
    </p>

    <a class="button" href="#">Read More</a>

</article>

<aside>
    <img src="images/sample@2x.png" alt="パソコンを見る女性">
</aside>

該当のソースコード

/* about
---------------------*/

.about {
display: flex;
text-align: center;

justify-content: space-around;
margin-bottom: 50px;
このコードをクリップボードにコピー
}

/*記事部分　*/
article {
width: 45%;
order: 2;
}

/*小さな画像　*/
aside {
width: 480px;
height: 329px;
margin-right: 10px;
order: 1;

}

h3 {
font-size: 32px;

}

article p {
font-size: 16px;
letter-spacing: 0px;
text-align: left;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 40px;
width: 394px;
height: 161px;
}

/* モバイル版
-------------------*/
@media (max-width:600px) {
.about {
flex-direction: column;

}

.article,
.aside {
width: 100%;

}

h3 {
font-size: 2rem;
flex-wrap: nowrap;
}

.article {
text-align: center;

}

試したこと

cssグリッドでgrid-template-colums: 1fr 1fr;
を試しましたがうまくいきません。

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

回答1件

ベストアンサー

どのようなレイアウトを想定しているのか不明瞭ですので、レスポンシブの一般的なレイアウトを提案します。

全体を覆うブロックに最大幅(max-width)を設定する。
これを設定しないと、画面幅が広いときに要素が広がりすぎて間延びした印象になったり、テキストの1行が長くなりすぎて読みづらくなります。

内容の要素はpx単位の固定値では設定しない。画面幅が広いと無意味に余白が空いたり、逆に狭いと画面からはみ出したりします。基本は%単位で設定しましょう。
①の文字が切れるというのはこのpx単位で指定しているのが原因です。

②③の原因は、下記の部分の間違いが原因です。

css
1.article,
2.aside {
3width: 100%;
4}

article aside はクラスではないので、.は不要です。

上記の点を考慮して書き直すと下記のような感じになります。

html
1<div class="container">
2  <h2>Feature</h2> <div class="about wrapper"> <article>
3  <h3>What is “Coding Basics”?</h3>
4  <p>
5    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
6    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
7    ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
8    eu.
9  </p>
10
11  <a class="button" href="#">Read More</a>
12
13  </article>
14
15  <aside>
16    <img src="https://picsum.photos/480/329">
17  </aside>
18</div>

css
1.container {
2  max-width: 1200px;
3  margin: 0 auto;
4}
5
6/* about
7---------------------*/
8
9.about {
10  display: flex;
11  text-align: center;
12  gap: 20px;   
13  justify-content: space-between;
14  margin-bottom: 50px;
15}
16
17/*記事部分　*/
18article {
19  width: 50%;
20  order: 2;
21}
22
23/*小さな画像　*/
24aside {
25  width: 50%;
26  height: auto;
27  margin-right: 10px;
28  order: 1;
29
30}
31aside img {
32  width: 100%;
33}
34
35h3 {
36  font-size: 32px;
37}
38
39article p {
40  font-size: 16px;
41  letter-spacing: 0px;
42  text-align: left;
43  letter-spacing: 0px;
44  line-height: 24px;
45  margin-bottom: 40px;
46
47}
48
49/* モバイル版
50-------------------*/
51@media (max-width:600px) {
52  .about {
53    flex-direction: column;
54  }
55
56  article,
57  aside {
58    width: 100%;
59  }
60
61  h3 {
62    font-size: 2rem;
63    flex-wrap: nowrap;
64  }
65
66  .article {
67    text-align: center;
68  }
69}