CG
(@du-bist-der-lenz)
PCサイズでは18px、スマホサイズでは16pxに変化していますよ
スマホサイズを12pxにしたいのですが下のfont-sizeのところに入れるので間違ってますか?
ブラウザーは、なにを、お使いでしょうか。
Chromeの「デベロッパーツール」(右上のマーク > その他のツール > デベロッパーツール)でチェックしてみると、
指定されたClassセレクター名が、違っているような気がするのですが…いかがでしょうかー。
こんにちは
line-height と font-size の前が空白ではない文字(No-Break Space)になっています。
下記のページ等でチェックしてみてください。
https://validator.w3.org/
とりあえず、stylelintに怒られないよう書き換えてみました。
@media screen and (max-width: 480px) {
.page-title {
font-weight: bold;
font-size: 24px;
line-height: 1.4;
}
.article p,
.entry-content p {
font-size: 12px;
line-height: 1.4;
}
}
line-heightは最低でも1.4くらいはないと文字がつまりすぎて
読みにくいのでそのあたりは調整しておきました。
http://www.htmq.com/style/line-height.shtml
皆さんありがとうございます。
文字の大きさは変わったのですが
投稿の編集画面で文字の大きさを変えてしまった記事の文字の大きさが変わらないんですがどうすればいいですかね?
<span style="font-size: 18px;">hogehoge</span>
のようにインラインで定義されたスタイルに打ち勝つ方法は
font-size: 12px !important;
というように!important
をつけるよりありませんね。
!importantを入れたんですが変わりませんでした。何が悪いのでしょうか?
投稿の編集画面で変えてしまった文字の大きさを一括で元に戻す方法はないのでしょうか?
CG
(@du-bist-der-lenz)
p要素の中に、span要素があり、それに文章が続いているからではないですか。そうなるとWordPressより、投稿の作り方に課題がありそうです。
これでどうにかなればよいのですが・・・
@media screen and (max-width: 480px) {
.article p,
.entry-content p,
.article p span,
.entry-content p span {
font-size: 16px !important;
line-height: 1.7 !important;
}
}
あとは、記述先を子テーマのstyle.cssに変えるとか(こっちのほうが優先度が高い?)
CG
(@du-bist-der-lenz)
initial
で解除するにも、限界がありそうですね。
CG
(@du-bist-der-lenz)
htmlソース内にstyleを直書きしないようにしましょう、という戒めですね。
$(function() {
$('body *').removeAttr('style');
});
@du-bist-der-lenzさん
JavaScriptで対応ですか・・・
Simple Custom CSS and JSを導入してもらって
Add JS Code
から追加してもらえばなんとかなるのかな・・・
@media screen and (max-width: 480px) {
.article p,
.entry-content p,
.article p span,
.entry-content p span {
font-size: 16px !important;
line-height: 1.7 !important;
}
}
これでできました
記述先を子テーマのstyle.cssに変えても変わりませんでした。