# １）UI builderでの表示レイアウトと、PreviewやResponsiveでの表示レイアウト......
**URL:** https://www.nocode-faq.com/t/topic/256
**Category:** bubble
**Created:** [2021 年 2 月 2 日午前 8:40 UTC](https://www.nocode-faq.com/t/topic/256 "2021-02-02T08:40:33Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@Question\_user](https://www.nocode-faq.com/u/Question_user)
#### Post date: [2021 年 2 月 2 日午前 8:40 UTC](https://www.nocode-faq.com/t/topic/256/1 "2021-02-02T08:40:33Z")
１）UI builderでの表示レイアウトと、PreviewやResponsiveでの表示レイアウトに、画像の大きさやボタンの位置などに大きくズレが出て直せません（キャプチャご参照）。どのようにしたらUI
builder通りにPreviewや本番で表示できますでしょうか？
２）Responsiveの調整方法が知りたいです。PC前提ではレイアウト問題なくても、スマホにするとエレメントの表示の順番や大きさ、位置などに問題があり、直したいのですが、色々いじったりしても直し方がわかりませんでした。
---
### Author:  [@Answer\_user](https://www.nocode-faq.com/u/Answer_user)
#### Post date: [2021 年 2 月 2 日午前 8:40 UTC](https://www.nocode-faq.com/t/topic/256/2 "2021-02-02T08:40:34Z")
回答者
おそらくこちらを拝見する限りは各ElementをGroup化されていないことに原因があるかな、という印象です。
まずはそれをやるとここまでのズレは解消されます。
また、ズレを完全になくしたい場合は「Fixed Width」にすることです。
ページの空白部分をダブルクリックするとページのエディタが出てきますので、画像のように設定するとズレることはなくなります。
これだとレスポンシブ設定ができませんので、続いてこちらの「子」であるのが先ほど紹介したElementのGroup。
こちらを同じようにFixed widthにしてみるとわりと解決しませんか？
うまくいかない場合は、Groupの幅を調整してみます。
親→子（一番下であるページが親、その上に乗っているGroupが子、更にその上に載ってるElementが子（孫）という概念）の順にResponsive調整をするイメージで進めてみてください。
Group化の概念は非常に重要ですので、こまめに行うようにしましょう。
質問者
アドバイス通り、まず揃えて並べたい４つのボタンをRepeatingGroup直上に置かず、間に４つのボタンだけを括るGroupを入れて、そのGroupをRepeatingGroupという２段階の親子関係にしたところ、横ずれは無くなりました！
ただ、一方で、そのボタンの文字が非表示になったり、そもそもボタンを押しても反応しなくなってしまい、RepeatingGroupと直接親子関係でないといけないのかなと（でもそれだとレイアウトが崩れる）と悩んでいます。
回答者
RepeatingGroup上にGroupは良い流れですね！
その時に注意なのが、そのGroupにもきちんとType of contentを指定して紐づけてあげないと表示がされなくなります。
よくここが落とし穴になりがちなのですが、このケースに該当してますか？
## 参考画像
