ナレッジサイト
ログイン
作成したHPについてPC及びスマホで見ていただく予定でおります。 作成したページについてPCで見ると問題なく表示されます。 スマホのような幅が狭い端末で見るとボタンは小さくなるのですが、 文字がPCで見るものと同じ大きなとなってしまいます。 （スマホで見る場合は文字を小さく表示したいです。） cssで制御を入れているのですが、制御が利いていない状態です。 下記の記述をcssに入れているのですが何が問題なのでしょうか？ ご教授の程、よろしくお願いいたします。
.cell-button {
padding: 0.5rem 1rem; /* ボタンの余白 */
font-size: 1rem; /* フォントサイズ */
font-weight: bold; /* フォントの太さ */
min-width: 6em; /* ボタンの最小幅 */
}
/* スマホ版（画面幅768px以下の場合） */
@media screen and (max-width: 768px) {
.cell-button {
padding: 0.3rem 0.6rem; /* ボタンの余白を小さくする */
font-size: 0.85rem; /* フォントサイズを小さくする */
min-width: 5em; /* ボタンの最小幅を調整 */
}
}コメント
ナレッジ
向上チーム
添付いただきました記載を確認させていただきまして、スマホ用、PC用での表示の 切り替えの設定については正しい記述が行われているようです。 １点確認になりますが、/* スマホ版（画面幅768px以下の場合） */になりますので、 もし使用しているスマホの画面幅が769px以上の場合はPC用のCSSが適用された状態になります。 利用環境の確認もしくはmax-width: 768px部分の指定をご変更いただき 利用環境に適した画面幅が設定されているか再確認いただけますでしょうか。
-
いいね
2025年1月16日(木)