[穴井貴裕]

【お使いの Snow Monkey のバージョン】15.11.1
【お使いの Snow Monkey Blocks のバージョン】12.6.1
【お使いの Snow Monkey Editor のバージョン】 6.2.1
【お使いのブラウザ】Chrome
【当該サイトのURL】https://www.ub-roots.com

### 実現したいこと

スマホ表示の際にFV内のタイトルのフォントサイズを小さくしたい。

### 発生している問題

追加CSSにコードを書いたが反映されない

### 試したこと

変更したい箇所に高度な設定からfvtitleというクラスを追加しました。

追加した状態が添付画像の状態になります。

その後下記のコードを追加CSSに記載しましたが反映されません。

@media ( max-width: 639px) {
.fvtitle>.sme-font-size{
font-size: 18px;
}
}

その他にもfvtitleというクラスを外したり、>を失くしたりといろいろな書き方をしましたが動きません。

なにか根本的に書き方が違うのでしょうか？

ご教授いただけると幸いです。

よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[GONSY]

こんにちは。

Snow Monkey Editorで文字サイズを変更されていらっしゃるので

@media ( max-width: 639px) {
	.fvtitle>.sme-font-size{
		font-size: 18px!important;
	}
}

でいかがでしょうか？

少し手間になりますが、PCとスマートフォンで最適なサイズで固定したい場合は、各要素にクラス名をつけ、CSSで調整したほうが良いかもしれません。

♥ 1

いいねをした人:

[まーちゅう]

こんにちは。
cssの詳細度の問題ではないですか？
!importantを付けるか、Snow Monkey Editor のフォントサイズ指定を外して、.fvtitleのフォントサイズをメディアクエリーを使用してスマホ/PCそれぞれのフォントサイズを追加CSSに記載すればうまくいくと思います。

.fvtitle {
	font-size: 18px;
	@media (min-width:640px) {
		font-size: 88px;
	}
}

♥ 1

いいねをした人:

[まーちゅう]

回答がかぶっちゃいましたね。
言ってる内容は、GONSYさんと同じです。

♥ 0

いいねをした人: 居ません

[穴井貴裕]

GONSY様

まーちゅう様

ご親切にありがとうございます。

お二人が提示してくださったコードを試してみたのですが両方とも反映されませんでした。

他になにか考えられることはありますでしょうか？

♥ 0

いいねをした人: 居ません

[まーちゅう]

GONSYさんのコードは、>を外してみてください。

@media ( max-width: 639px) {
	.fvtitle .sme-font-size{
		font-size: 18px!important;
	}
}

私の書いたコードが反映されないのは、Snow Monkey Editor のフォントサイズ指定を外されていないからですね。

Snow Monkey Editor のフォントサイズ指定を外して

`

♥ 1

いいねをした人:

[穴井貴裕]

まーちゅう様

反映されました！

ご丁寧に返信をくださり本当にありがとうございます！

♥ 2

いいねをした人:

[投稿者]

投稿