• コミュニティ

  ボタンのレイアウトが崩れてしまう

  トピックス by widget初心者 1792 pt  2023年9月20日 15:20 309 PV

  【Widget名】

  ぷよっと動くボタン

  【修正したいこと】

  アンドロイドで確認すると、レイアウトが崩れてしまいます

  【参考画像】

  https://drive.google.com/file/d/15HJ9Vr_n11GKavneT-ZVRvav2aycwUTz/view

  widgetマスター   1 年, 2 月前 2 人 · 1 コメント

  • widget
  • ぷよっと動くボタン
  • ボタン
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年9月21日 10:50

  画像でのボタンを想定されている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;
    }
  }

Log In to Reply