文字の詰め方を知りたい | コミュニティ

タグ付き： widget, デイリーカウントダウンタイマー付きランキングボックス※要Javascript(囲み枠)

コミュニティ

文字の詰め方を知りたい

トピックス by widget初心者 1792 pt 2023年11月1日 12:14 257 PV
【Widget名】

デイリーカウントダウンタイマー付きランキングボックス※要Javascript(囲み枠)

【相談内容】

既存の王冠マークのランキングを削除して、文字を左詰めにして表示をしたいのですが、現状だとスマホで表示した際に左に2文字ずつ詰められて表示されてしまうため、スマホで表示された際も左詰めかつ一文で表示されるよう修正いただけますと幸いでございます。
文字.png 272 KB 画像ファイル — クリックして見る



コピーダウンロードリンク
widgetマスター 1 年前 2 人 · 1 コメント
- widget
- デイリーカウントダウンタイマー付きランキングボックス※要Javascript(囲み枠)
1 コメント

widgetマスター

モデレータ

2023年11月1日 12:17

下記のように修正してください！

CSS

.rankings-limit-head .image {
    aspect-ratio: 21/16;
    position: relative;
    display: none; /* 追加 */
}

・display: none; を追加

.rankings-limit-head {
    background-color: #333c5e;
    padding: 0.5em 1em;
    color: #ffffff;
    font-size: 2em;
    font-weight: 600;
    display: grid;
    grid-template-columns: auto; /* 変更 */
    column-gap: 0.5em;
    align-items: center;
}

.rankings-limit-head {
    grid-template-columns: auto; /* 変更 */
  }

・grid-template-columns をauto に変更する

※2か所あるので両方とも変更してください

よろしくお願いします！