フッターの設置について質問です。
デザイン上ではスクリーンの中央最下部にフッターが設置できているのですが、
プレビューにしたとたん左端のほうに行ってしまいます。
こちらはどうすればきれいに設置ができますでしょうか？
よろしくお願いいたします。
こちらはFloating Groupでしょうか。
Make this element fixed-width を外して、
Max widthをinf
Fit width to contentを外してください。
これで画面幅いっぱいにFooterが配置されます。
あとは中身のテキストやGroupのHolizon alignmentをCenterにすると真ん中に配置されます。
「いいね！」 1
ご回答ありがとうございます！
一部お伝えの仕方が拙い点があり恐縮ですが、
こちらのアプリはモバイル版のみの作成を想定しており
横幅はMax768pxで作りたいと考えております。
その場合は対応方法など変わりますでしょうか？
考え方は同じで良いですよ。
階層にするとこんな感じでしょうか。
Floating group ( max-width: inf ; )
∟Group ( max-width: 768px; )
∟text
背景色はGroupのみ付けてあげると良いと思います。
「いいね！」 1
ありがとうございます。
こちら試してみたのですが、やはりfooterが端に寄ってしまいます。
お忙しいところ大変恐縮ですが、状況がわかるよう写真を添付させていただきます。
こちらご確認いただけますと幸いです。
▼写真1枚目
Footerがうまく表示されないページのデザイン画面です
▼写真2枚目
上記ページのプレビューです
▼写真3枚目
Footerのデザイン画面
▼写真4枚目
Footerの表示がうまくいっているページのデザイン画面です。
こちらではFooterがGroup body内に入ってます
→なぜ入ったのかはわかってないです、、、
Group body内に入っていることで実際にモバイル端末などで見た際おかしな表記にならないかも心配しております
▼写真5枚目
上記のページのプレビュー
よろしくお願いいたします。
状況把握のために、開発ページをevery can viewにしてURLを共有してもらうことは可能でしょうか。
「いいね！」 1
ありがとうございます。
承知いたしました。
▼プレビュー上はFooterがしっかりした位置に配置されているが、
Group body内に入っているためコンテンツのスクロールができないページ
▼プレビュー上Footerの配置がずれてしまうページ
よろしくお願いいたします。
①FloatingGroupがGroupの中に入るのは通常ありえないので、一旦Group内のFooterを消してから、再度ReusableのFooterを置きなおしてみると良いです。ちゃんとエラーも出ていますね。
（元々ReusableのFooterをGroupで作っていて、その状態でGroupBody内にFooterを入れていたとします。その後、ReusableのFooterをFloatingGroupに変えると、このような現象になることがあります）
②Footerが左に付くのは、FloatingGroupにMax-widthが設定されているからです。
FloatingGroupのMax-widthは設定なし (inf)、直下のGroupにMax-widthを設定すると真ん中に行きます。
「いいね！」 2
ご回答ありがとうございます！
承知いたしました！
度々失礼いたします。
フッター同様にヘッダーも設置をしたのですが、下記のエラーが出てします、、、
こちらが原因かはわかりませんが、他のページのヘッダーもヘッダー内に画像が組み込まれているものは同様のエラーが起きております。
→画像が組み込まれていないヘッダーは正常に実装できております
お忙しいところ恐縮ですが、こちらもご覧いただくことは可能でしょうか？
▼エラー内容
ヘッダーがmax withで設定している768pxよりも広がってしまう
・該当ページのプレビュー
・該当ページのデザイン画面