レスポンシブサイトコーディング中　メディアクエリを用いて　display:blockが上手く効かない

いつもお世話になっております。

レスポンシブ対応のサイトをコーディング練習中です。

こちらのサイトの様に
スクリーンを479px以下にしたときに
日付と中身のコンテンツが縦に並ぶ様にしたいです。
thとtdそれぞれに、
display:block;を記述しましたが、上手く行きません。。。

それともう一点（質問が多くなってしまいすみません。）

TOPICSという上の文字と
リストをdisplay:blockを用いてflexを解除する事は出来たのですが、
TOPICSの文字を中央揃えにしたいのですが、
これもmargin: 0 auto;だったりtext-align:center;で試してみたのですが、
上手く動きませんでした。

以下の画像が今現在の状況です

よろしくお願いします。

html
1
2<article class="topics">
3   <section class="content-wrapper">
4     <div slass="heading">
5       <h2>TOPICS</h2>
6     </div>
7     <div class="content">
8       <table>
9         <tbody>
10           <tr>
11             <th>2020.00.00</th>
12             <td>タイトルが入ります。</td>
13           </tr>
14           <tr>
15             <th>2020.00.00</th>
16             <td>タイトルが入ります。</td>
17           </tr>
18           <tr>
19             <th>2020.00.00</th>
20             <td>タイトルが入ります。</td>
21           </tr>
22           <tr>
23             <th>2020.00.00</th>
24             <td>タイトルが入ります。</td>
25           </tr>
26          </tbody>
27       </table>
28       <p class="btn"><a href="#">MORE</a></p>
29      </div>
30   </section>
31  </article>

CSS
1.topics{
2  padding: 120px;
3}
4
5.topics .content-wrapper{
6  display:-ms-flexbox;
7  display:-webkit-flex;
8  display: flex;
9  justify-content: space-between;
10}
11
12.topics .heading{
13  width:35%;
14}
15
16.topics .content{
17  width: 65%;
18}
19
20.topics .content table{
21  width: 100%;
22  margin: 0 0 25px 0;
23}
24
25.topics .content th{
26  padding: 20px 2em 20px 0;
27  border-bottom: 1px dotted;
28}
29
30.topics .content td{
31  border-bottom: 1px dotted;
32}
33
34.topics .content tr:last-of-type th,
35.topics .content tr:last-of-type td{
36  border-bottom: none;
37}
38
39.topics .content .btn{
40  margin: 0;
41}
42
43.topics .content .btn a{
44  display: block;
45  font-size: 0.8rem;
46  color: #000;
47  border: 1px solid #000;
48  width: 200px;
49  line-height: 60px;
50  text-align: center;
51  margin: 0 0 0 auto;
52}
53
54.topics .content .btn a:hover{
55  background: #333;
56  color:#fff;
57}
58
59@media screen and (max-width: 1199px){
60  .topics{
61    padding: 50px 5vw;
62  }
63
64  .topics .content-wrapper{
65    display: block;
66  }
67
68  .topics .heading{
69    width: 100%;
70  }
71
72  .topics .heading h2 {
73    text-align: center;
74    margin-bottom: 5vw;
75  }
76
77  .topics .content{
78    width: 100%;
79  }
80}
81
82@media screen and (max-width: 767px){
83  .topics{
84    padding: 50px 0;
85    width: 90%;
86    margin: 0 auto;
87  }
88
89  .topics .content .btn a{
90    width: 35%;
91    min-width: 200px;
92    margin: 0 auto;
93  }
94}
95
96@media screen and (max-width: 479px){
97  .topics .content th {
98    display: block;
99    width: 100%;
100    text-align: left;
101    padding: 1.25em 0 0 0;
102    border-bottom: 0;
103  }
104
105  .topic .content td {
106    display: block;
107    width: 100%;
108  }
109
110}
111

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

回答1件

ベストアンサー

日付と中身のコンテンツが縦に並ぶ様にしたいです。

thとtdそれぞれに、
display:block;を記述しましたが、上手く行きません。。。

タイプミスですね。

css
1/*  .topic .content td { */
2  .topics .content td {

TOPICSの文字を中央揃えにしたいのですが、

まず下記のタイプミスを修正。

html
1/*    <div slass="heading"> */
2    <div class="heading"> 
3      <h2>TOPICS</h2>
4    </div>

h2 に text-align: center; を設定。

css
1 .heading h2{
2    text-align: center;
3  }

最初、このタイプミスは気付かずに苦労しました（;^ω^)

投稿2020/05/04 05:33

hatena19

総合スコア34075

AmanoEriko

2020/05/04 06:45 編集

ご回答ありがとうございます！なんと、、、、こんなにタイプミスがあったなんて、、、、お恥ずかしい限りです。（topicsの文字の中央揃えは直りました！！）テーブルの方のエラーなのですが、 .topics .content td の所のタイプミスを修正した所、まだ正常に動きません。。。なぜでしょう？再度、タイプミスが無いかとチェックをしたのですが、どうやら大丈夫そうです。。。

AmanoEriko

2020/05/04 08:13

すみません！！解決いたしました！！

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