Closed okaka-c closed 1 month ago
変更の概要 大会詳細ページのレスポンシブ対応をした
関連するIssueやプルリクエスト close #265
[x] コンテナクラスを定義して画面のサイズに合わせて、要素の幅を自動的に調整させた
<div class="container mx-auto"> ・・・ </dev>
[x] 768pxにまでは、大会情報部、試技計算結果、試技結果部のそれぞれのカードの幅を画面サイズに合わせて自動的に幅を広げていく カードの要素に以下のユーティリティを定義
w-4/5 md:max-w-screen-md
w-4/5: 要素の幅を親要素の80%に設定。画面幅の80%に広がる。 md:max-w-screen-md: 画面幅が768px以上になったら要素の最大幅を固定。
[x] 640px以上から文字の位置と大きさを調整
変更の概要
変更の概要 大会詳細ページのレスポンシブ対応をした
関連するIssueやプルリクエスト close #265
やったこと
レスポンシブ対応
[x] コンテナクラスを定義して画面のサイズに合わせて、要素の幅を自動的に調整させた
[x] 768pxにまでは、大会情報部、試技計算結果、試技結果部のそれぞれのカードの幅を画面サイズに合わせて自動的に幅を広げていく カードの要素に以下のユーティリティを定義
w-4/5: 要素の幅を親要素の80%に設定。画面幅の80%に広がる。 md:max-w-screen-md: 画面幅が768px以上になったら要素の最大幅を固定。
[x] 640px以上から文字の位置と大きさを調整