<?php the_content(); ?>で取得したものをレスポンシブ化させたい。

前提・実現したいこと

wordpressのテンプレートタグである<?php the_content(); ?>で取得したものをレスポンシブ化させたい。

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

取得した記事内容の文字をレスポンシブにしたいのだが、やり方が分からない。
style.cssにブレイクポイントを記述したが反応がなかった。

該当のソースコード

php
1<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2                    <article class="main-contents__block page-block" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
3                        <figure class="main-contents__image page-block__image">
4                            <span  itemscope itemtype='http://schema.org/ImageObject' itemprop="image">
5                                <a href="<?php the_permalink(); ?>" itemprop="url" itemscope class="thumbnail-img">
6                                    <?php if (has_post_thumbnail()) : ?>
7                                        <?php the_post_thumbnail('full', array('itemprop' => 'image')); ?>
8                                    <?php else : ?>
9                                        <img src="https://placehold.jp/600x400.png" alt="">
10                                    <?php endif; ?>
11                                </a>
12                            </span>
13                        </figure>
14                        <meta itemprop="about" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>">
15                        <section class="main-contents__texts">
16                            <time class="main-contents__time" itemprop="datePublished">
17                                <?php    the_time('Y/m/d'); ?>
18                            </time>
19			                <time itemprop="dateModified">
20			                    (更新日: <?php the_modified_date('Y/m/d'); ?>)
21		                    </time>
22                            <p class="category"   itemprop="keywords"> 
23                                <a href="<?php the_permalink(); ?>">
24                                    <?php the_category(','); ?>
25                                </a>
26                            </p>
27                            <h1 class="h2"  itemprop="name headline">
28                                <a href="<?php the_permalink(); ?>" title="<?php printf(the_title_attribute('echo=0')); ?>" itemprop="url">
29                                    <?php the_title(); ?>
30                                </a>
31                            </h1>
32                            <p class="main-contents__description" itemprop="description"><?php the_content(); ?></p>
33                        </section>
34                    </article>
35                <?php endwhile; ?>
36            <?php endif; ?>
37
38//クロームで見た場合
39<p class="main-contents__description" itemprop="description"></p>
40<div id="toc_container" class="no_bullets contracted" style="width: auto; display: table;"><p class="toc_title"></div>
41
42//main-contents__descriptionの中ではなく外に表示されている。
43

sass
1@media screen and (max-width: 480px) {
2 .main-contents {
3            .main-contents__box {
4                .main-contents__list {
5                    .main-contents__block { 
6                        .main-contents__texts {
7                            padding: 15px;
8                            .main-contents__time {
9                                font-size: 15px;
10                            }
11                            .category a{
12                                margin: 10px 0;
13                            }
14                        
15                            h2 a {
16                                font-size: 20px;
17                                
18                            }
19                            h2{
20                                margin-bottom: 10px;
21                            }
22                            p{
23                                font-size: 13px;
24                            }
25									 
26                           h1{
27										 
28                               font-size:10px;
29									 
30                             }
31                          .main-contents__description{
32                               h1{
33                                  font-size:20px;
34                               }
35                             }
36			   }
37                        }
38                    }
39                }
40            }
41        }

試したこと

style.cssに記述したが反応なし

補足情報（FW/ツールのバージョンなど）

機種:MacBook Air

m.ts10806

2020/05/09 01:29

class="main-contents__block> ↑"で閉じられてませんがこれは本当にそのままですか？

cafe1111

2020/05/09 01:33

すみません、わかりやすいように色々削って必要な分だけ表示したのでミスしてしまいました。本来はコードももっとありますし、上記のところも閉じてあります。

m.ts10806

2020/05/09 01:58

なるほど、ただCSSのほう main-contents__description{ これではクラスに対する指定になっていませんし、 main-contents__description{ h1{ のように入れ子はできないと思います（SCSSなのかもしれませんが）やはり変に省略しすぎると逆に分からなくなるので、「最小限のコード」は「構文的に問題のない状態のコード」を提示された方が良いかと思います。他人ゆえ、提示されたものが全てです。