レスポンシブデザイン。画面を動かしても、要素が動きません。

パソコン画面を狭くするとともに要素が狭くなりません。なぜでしょうか？
ほかの要素は、画面を狭くするとともに、幅が狭くなるのですが、一部ならない要素があります。
なんというか、要素が画面に固定されている感じです。

伝え方下手ですみません。

html
1<div class="sidebar-wrapper">
2      <ul>
3        <li>
4          <div class="sidebar-img">
5            <img src="-------------------------" class="icon" alt="">
6          </div>
7        </li>
8        <li>
9          <div class="message">
10            <p class="txt">「Airbnbは自活できるのがいいですね。毎晩外食しなくても、みんなで好きなものを料理できるし、とても出張とは思えないほど現地に根を下ろせます」</p>
11            <p class="marta-kutt">MARTA KUTT様</p>
12            <p class="manager">Transferwise社マネジャー</p>
13          </div>
14        </li>
15      </ul>
16    </div>

css
1.sidebar-wrapper{
2  width: 100%;
3  height: 700px;
4  padding: 100px 0 0 100px;
5}
6
7.sidebar-wrapper ul{
8  display: flex;
9}
10
11.sidebar-img{
12  width: 490px;
13  height: 500px;
14  margin-right: 20px;
15}
16
17.message{
18  width: 490px;
19  height: 500px;
20  background-color: #EEEEEE;
21  padding: 120px 100px 100px 100px;
22  line-height: 35px;
23}
24
25.txt{
26  font-size: 20px;
27  color: #333333;
28}
29
30.marta-kutt{
31  font-size: 15px;
32  font-weight: bold;
33  margin: 30px 0 0 0px;
34  line-height: normal;
35  color: #333333;
36}
37
38.manager{
39  color: #333333;
40  font-size: 15px;
41  line-height: normal;
42}

以上、よろしくお願いします。

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

回答1件

ベストアンサー

.sidebar-img .message の幅をwidth: 490px;と固定値で設定しているので画面を狭めても変わらないのは当然ですね。単位を % の相対値で設定する必要があります。

他の部分の設定や、どのようなレイアウトが希望なのか不明なので、一例をあげるとすると下記のようなCSSになります。

css
1.sidebar-wrapper{
2  width: 100%;
3  max-width: 1100px;
4  height: 700px;
5  margin: 0 auto;
6  padding: 0 20px;
7  box-sizing: border-box;
8}
9
10.sidebar-wrapper ul{
11  display: flex;
12  justify-content: space-between;
13  margin: 0;
14  padding: 0;
15  list-style: none;
16}
17
18.sidebar-wrapper li {
19  width: calc(50% - 20px);
20}
21
22.sidebar-img{
23  width: 100%;
24  height: 500px;
25}
26.sidebar-img img {
27  width: 100%;
28  height: 500px;
29  object-fit: cover;
30}
31
32.message{
33  width: 100%;
34  height: 500px;
35  background-color: #EEEEEE;
36  padding: 0 100px;
37  line-height: 35px;
38  box-sizing: border-box;
39  display: flex;
40  flex-direction: column;
41  justify-content: center;
42}
43
44.txt{
45  font-size: 20px;
46  color: #333333;
47}
48
49.marta-kutt{
50  font-size: 15px;
51  font-weight: bold;
52  margin: 30px 0 0 0px;
53  line-height: normal;
54  color: #333333;
55}
56
57.manager{
58  color: #333333;
59  font-size: 15px;
60  line-height: normal;
61}