-
ボタンのレイアウトが崩れてしまう
トピックス by
1792 pt
2023年9月20日 15:20
98
PV
【Widget名】
ぷよっと動くボタン
【修正したいこと】
アンドロイドで確認すると、レイアウトが崩れてしまいます
【参考画像】
https://drive.google.com/file/d/15HJ9Vr_n11GKavneT-ZVRvav2aycwUTz/view
-
1 コメント
-
画像でのボタンを想定されているWidgetのため、
現状からの調整方法をお示しいたします。
① レスポンシブに対応するため現在 spanタグに設定されているフォントサイズを調整
[ 修正前 ]
<span style="font-size: 25px;" class="sb-fs-free">
<font color="#FFF251">５０％オフで今すぐ購入する</font>
</span>[ 修正後 ]
font-size: 25px; → font-size: 1.6em; に変更
<span style="font-size: 1.6em;" class="sb-fs-free">
<font color="#FFF251">５０％オフで今すぐ購入する</font>
</span>② レスポンシブ時のCSSの調整
下記CSS をWidgetのCSSエディタの最後に追加
@media (max-width: 500px) {
.puyoBtn__area .btn {
font-size: 3.3vw; /* 3.0vw 〜 4.0vw くらいで調整してみて下さい */
padding:1em;
}
}