wordpressで投稿したコラムの中身の文字の大きさをスマホとPCで分けたい

前提・実現したいこと

初めまして。
まだwordpressはじめたての初心者です。

コラムを投稿しています。
文字のサイズをPCとスマホを別で見やすい大きさに分けたいです。
どのようにしたら良いかご教示下さい。

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

PCでコラムを作成し、
いざスマホで見たら文字の大きさがPCサイズと同じになっているので
とても見にくくなっています。

該当のソースコード


&nbsp;
<h1 style="text-align: left;"><span style="font-size: 36px; color: #f07c24;"><strong><span style="background-color: #fff0db;"><span style="background-color: #ffffff;">外壁塗装、屋根塗装をする３つの必要性</span></span></strong></span></h1>
&nbsp;

試したこと

調べてはみたのですが、どのようにソースコードを打ち込めばよいのかわからないのが現状です。

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

回答1件

ベストアンサー

現状のHTMLを下記のように修正したらどうでしょうか。

html
1&nbsp;
2<style>
3  #title {
4    text-align: left;
5    font-size: 24px;  /*スマホ用のフォントサイズ*/
6    color: #f07c24;
7  }
8  @media screen and (min-width: 500px) {
9  #title {
10    font-size: 36px;  /*PC用のフォントサイズ*/
11  }    
12} 
13</style>
14<h1  id="title">
15  <strong>外壁塗装、屋根塗装をする３つの必要性</strong>
16</h1>
17&nbsp;