レスポンシブ対応について

前提・実現したいこと

スマホサイズのレスポンシブ対応を実現したいです。
フッター部分のSNSアイコンをTELの電話番号の下にアイコンを縦に並べたいです。

該当のソースコード

HTML
1
2
3  <Feature>
4    <div class="feature-titles">
5      <div class="feature-title-a">
6        Feature
7      </div>
8      <div class="feature-text">
9        it is long established fact a reader will be distracted by the readable<br>
10        content of a page when looking at its layout.<br>
11        The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters
12      </div>
13    </div>
14    <div>
15      <div class="features">
16        <div class="feature1">
17          <div class="feature-img">
18            <img src="img/code-solid.svg" alt="" width="60px" height="60px" class="">
19          </div>
20          <div class="feature-title">
21            Strength1
22          </div>
23          <div>
24            Contrary to popular belief, Lorem Ipsum<br>
25            is not simply random text.It has roots<br>
26            in a piece of classical Latin literature<br>
27            from 45 BC, making it over 2000 years<br>
28            old Richard MacClintock, a Latin<br>
29            professor at Hampden-Sydney College<br>
30            in Virginia, looked up one of the more<br>
31            obscure Latin words consectetur<br>
32          </div>
33        </div>
34        <div class="feature2">
35          <div class="feature-img">
36            <img src="img/pc.svg" alt="" width="60px" height="60px">
37          </div>
38          <div class="feature-title">Strength2</div>
39          <div>
40            Contrary to popular belief, Lorem Ipsum<br>
41            is not simply random text.It has roots<br>
42            in a piece of classical Latin literature<br>
43            from 45 BC, making it over 2000 years<br>
44            old Richard MacClintock, a Latin<br>
45            professor at Hampden-Sydney College<br>
46            in Virginia, looked up one of the more<br>
47            obscure Latin words consectetur<br>
48          </div>
49        </div>
50        <div class="feature3">
51          <div class="feature-img">
52            <img src="img/cogs-solid.svg" alt="" width="60px" height="60px">
53          </div>
54          <div class="feature-title">Strength3</div>
55          <div>
56            Contrary to popular belief, Lorem Ipsum<br>
57            is not simply random text.It has roots<br>
58            in a piece of classical Latin literature<br>
59            from 45 BC, making it over 2000 years<br>
60            old Richard MacClintock, a Latin<br>
61            professor at Hampden-Sydney College<br>
62            in Virginia, looked up one of the more<br>
63            obscure Latin words consectetur<br>
64          </div>
65        </div>
66      </div>
67    </div>
68  </Feature>
69  <Contact>
70    <div class="profiles">
71      <div class="profile-top">
72        <div class="profile">
73          Profile
74        </div>
75        <div class="profile-text">
76          it is long established fact a reader will be distracted by the readable<br>
77          content of a page when looking at its layout.<br>
78          The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters
79        </div>
80      </div>
81      <div class="profile-bottom">
82        <div class="profile-bottom-text">
83          <div class="icon-imgs">
84            <img src="img/my-icon.jpg" alt="" class="icon-img" width="250px" height="250px">
85          </div>
86          <div class="myname">
87            <h3 class="myname-title">
88              MyName<br>
89            </h3>
90            <div class="MyName-text">
91              Contrary to popular belief, Lorem Ipsum is not simply random<br>
92              text. It has roots in a piece of classical Latin literature from 45<br>
93              BC,making it over 2000years old. Richard McClintock, a Latin<br>
94              professor at Hampden-Sydney College in Virinia, looked up<br>
95              one of the more obscure Latin words, consectetur
96            </div>
97            <div class="myskills">
98              <h3 class="mayname-title">
99                MySkills<br>
100              </h3>
101              HTML/CSS/JavaScript/JQuery/PhotoShop
102            </div>
103          </div>
104          </div>
105        </div>
106      </div>
107    </div>
108    <div class="contacts">
109      <div class="contact">
110        <div class="contact-title">Contact</div>
111        <div class="contact-text">
112          it is long established fact a reader will be distracted by the readable<br>
113          content of a page when looking at its layout.<br>
114          The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters
115        </div>
116        <div class="contact-bottom">
117          <div class="contact-left">
118            <div class="contact-left-a">
119              <div class="contact-top">
120                <h3 class="contact-bottom-title">Mail</h3>
121                <a href="#" class="contact-link">xxx@xxx.com</a>
122              <div class="contact-down">
123                <h3 class="contact-bottom-title">Tel</h3>
124                <a href="#" class="contact-link">000-0000-0000</a>
125              </div>
126            </div>
127          </div>
128          <div class="contact-right">
129            <div class="contact-right-a">
130              <h3 class="contact-bottom-title">SNS</h3>
131              <div class="sns-images">
132                <img src="img/facebook-f-brands.svg" alt="" width="50px" height="50px">
133                <img src="img/twitter-brands.svg" alt="" width="50px" height="50px" class="contact-img">
134                <img src="img/instagram-brands.svg" alt="" width="50px" height="50px">
135              </div>
136            </div>
137          </div>
138        </div>
139      </div>
140    </div>
141
142
143 ``````CSS
144/* タブレット縦置きサイズ（768px）以下の際に適用される設定 */
145```CSS```ここに言語を入力
146コード

@media screen and (max-width: 768px) {
.social i {
color: red;
}
.main-visual-img p {
color: #fafafa;
text-align: center;
font-size: 18px;
padding-top: 10px;
}
.main {
background-color: #ECEFF1;

}
.portfolio-title {
display: inline-block;
padding-top: 90px;
font-size: 32px;
color: #000000;
padding-bottom: 8px;
margin-bottom: 30px;
text-align: center;
margin: 0 auto;
}
.portfolio-title::after {
background-color: #EC715F;
height: 3px;
width: 70px;
content: "";
display: block;
margin: 8px auto 0 auto;
}
.portfolio-titles {
text-align: center;
}
.portfolio-text {
font-size: 16px;
color: #000000;
margin-bottom: 30px;
}
.portfolio {
width: 100%;
float: center;
margin: 0 auto;
background-color: #ECEFF1;
padding-bottom: 90px;
}
.feature-titel {
display: inline-block;
font-size: 32px;
color: #000000;
margin-top: 90px;
padding: 8px;
margin-bottom: 30px;
text-align: center;
border-bottom: solid 3px #ec715f;
}
.features {
width: 980px;
margin: 0 auto;
padding-bottom: 90px;
}
.feature-titles {
text-align: center;
margin-bottom: 30px;
}
.feature-text {
font-size: 16px;
color: #000000;
}
.features {
display:block;

}
.feature1 {
width: 320px;
height: auto;

}
.feature2 {
width: 320px;
height: auto;
margin: 0 10px;

}
.feature3 {
width: 320px;
height: auto;

}
.feature-title {
text-align: center;
font-size: 20px;
padding: 10px 0;
}

.feature-title-a {
text-align: center;
font-size: 32px;
font-weight: 600;
margin-top: 90px;
margin-bottom: 30px;
color: #000000;
padding: 10px 0;
}
.feature-title-a::after {
display: block;
content: "";
background-color:#EC715F;
height: 3px;
width: 70px;
margin: 8px auto 0 auto;
}
.feature-img {
text-align: center;
}
.profiles {
background-color: #ECEFF1;

}
.profile {
font-size: 32px;
color: #000000;
padding-bottom: 8px;
margin-bottom: 30px;
text-align: center;
font-weight: 700;

}
.profile::after {
content: "";
display:block;
background-color:#EC715F;
height: 3px;
width: 70px;
margin: 8px auto 0 auto;
}
.profile-text {
text-align: center;
margin-bottom: 30px;
}
.profile-bottom {
display: flex;
}
.icon-img {
border-radius: 50%;
}
.profile-bottom-text {
display: block;
text-align: center;
margin: 0 auto;

}
.myname {
width: 512px;
text-align: left;
margin-bottom: 90px;

}
.myname-title {
font-size: 20px;
padding-bottom: 5px;

}
.profile-top {

}
.icon-imgs {
width: 512px;
}
.MyName-text {
margin-bottom: 20px;
}

.contact {
margin: 90px auto;
width: 90%;

}
.contact-title {
font-size: 32px;
font-weight: 600;
color: "000000";
margin-bottom: 30px;

}
.contact-text {
margin-bottom: 30px;
width: 90%;
}
.contact-title::after {
content: "";
background-color:#EC715F;
display: block;
margin: 8px auto 0 auto;
height: 3px;
width: 70px;

}
.contact-bottom-title {
font-size: 20px;
padding: 5px;
}
.contact-bottom {
lex-flow: row wrap;
}
.contact-left {

}
.contact-right {

}
.contact-link {
color: black;
}
.contact-img {
margin: 0 20px;
}
.contact-left-a {

試したこと

display:flexの解除とblockを試しましたが、変わらず横のままです。

ここにより詳細な情報を記載してください。

m.ts10806

2021/04/30 22:43

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 また、「目指す表示」と「現在の表示」を目視できる情報（キャプチャやイメージ図）を添付してください。

K_3578

2021/05/01 02:47

回答に反応するならこっちも反応してくれよなー。 m.ts10806さんが仰る通りコードはコードブロック化してください。インデントぐっちゃぐちゃですしこれを見た第三者の何の参考にもなりません

K_3578

2021/05/01 03:07

閉じのバッククォート重なってるせいでcssが個別にブロック化してないので ```HTML ソース ``` (1行以上のスペース) ```CSS ソース ``` って感じに修正して下さい。

K_3578

2021/05/01 03:11

またミスってるけど･･･まぁいいか

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

回答1件

こんにちは。

フッター部分のSNSアイコンをTELの電話番号の下にアイコンを縦に並べたい

以下のようにしてはいかがでしょうか。

css
1.sns-images img {
2	display: block;
3}

投稿2021/05/01 00:55

Lhankor_Mhy

総合スコア36168

toshiaki4

2021/05/01 02:43

お世話になります。アイコンは縦並びになりますが、縦並びのアイコンをTELの下には移動しません。

Lhankor_Mhy

2021/05/01 02:45

当方の環境ではTELの下になっていますね。

Lhankor_Mhy

2021/05/01 02:46

下、というのはY軸上の下と理解していますが、もしかしてZ軸上の下ですか？

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！