wordpressの追加cssでレスポンシブ対応について

非常に初歩的な質問で恐縮ですが、私は、いつもサイトを作成するときには、Wordpressにて作成をしております。
スマホ対応がうまくいきません。
<meta name="viewport" content="width=device-width, initial-scale=1">
の記述は、header.phpに記載してある状態で

css
1@media screen and (max-width:480px) {
2	.with{
3		font-size:30rem;
4	} 
5}

のように記述しても変化がありません。

どのようにすれば、スマホでの閲覧とPCの閲覧を切り替えることが出来るのでしょうか？

Lhankor_Mhy

2021/02/19 05:27

開発者ツールなどで確認した時に、そのプロパティが他のルールに上書きされていませんか？

julie

2021/02/19 06:08

ひょっとしたら、pagebuilderというプラグインを利用してコーディングは行っているのひょっとしたらそれかもしれませんね。ありがとうございます。

Lhankor_Mhy

2021/02/19 06:11

わかりにくい表現で申し訳ありません。「開発者ツールなどで確認した時に、そのプロパティが他のルールに上書きされていませんか？」という文章は、「そのプロパティが他のルールに上書きされていないか、開発者ツールなどで確認して、その結果を提示してください」という意味です。よろしくお願いいたします。

julie

2021/02/19 07:48

すごく初歩的な質問で申し訳ないのですが、要素を検証は、利用していますが、どのようにすればよいでしょうか？

mai1210

2021/02/19 08:13

https://saruwakakun.com/html-css/basic/chrome-dev-tool https://prog-8.com/docs/html-dev https://dream-html-seminar.com/chrome_developer_tools/ .with がついている要素に、どういうCSSが当たっているのか確認してみましょう。複数のルールが当たっている場合は、より要素指定が細かい方が勝ちます。

julie

2021/02/20 01:07

了解しました。確認したところ、pagebuilderは、かなり細かく要素を強制的にはきだすことで、デザインを形成しているようで、こちらからさらに細かな要素指定はできそうにありませんでした。せっかくご協力いただいたのに申し訳ないです。ありがとうございました。

julie

2021/02/20 01:13

important!で対応しました。ありがとうございました。