# bubbleの新responsiveの横幅拡張について

**URL:** <https://www.nocode-faq.com/t/topic/2621>\
**Category:** bubble\
**Created:** [2022 年 2 月 21 日午前 11:15 UTC](https://www.nocode-faq.com/t/topic/2621 "2022-02-21T11:15:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\
**Post date:** [2022 年 2 月 21 日午前 11:15 UTC](https://www.nocode-faq.com/t/topic/2621/1 "2022-02-21T11:15:56Z")

</div>

お世話になります。  
bubbleの新reponについてですが、新しい仕様でresponをいじっていたところ、横幅が固定になり、画面サイズが広がっても、同じサイズで固定（中央に表示されて規格外は灰色背景）となってしまいます。  
これを柔軟に画面サイズに合わせて、拡張する方法がどのようにすればよろしいのでしょうか。  
またもし旧responsiveに戻せる方法があれば教えてください。

 ![スクリーンショット 2022-02-21 20.13.03](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/dd89b11fcd6f74cd55929933b65dd621a48733f6.png)

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2022 年 2 月 21 日午後 5:15 UTC](https://www.nocode-faq.com/t/topic/2621/2 "2022-02-21T17:15:23Z")

</div>

Fixed widthを外し、Max widthの欄を空白にすれば、横幅いっぱいまで広がります。  
この際、Fit width to contentのチェックは外してください。

親要素にMax widthが設定されていると子要素のMaxは自動的にその値になるので、  
背景色を設定しているエレメントの親要素にMaxが設定されていないことも同時にご確認ください。

新エディタにアップグレードすると、旧エディタには戻せなくなるので、念のため必ずバックアップは取っておくようにしてくださいね～。  
（アップグレードの際に表示されるポップアップで、Copy this page to retain a legacy backupにチェックを入れると、自動でバックアップが作成されます）

---

<div class="post-metadata">

**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\
**Post date:** [2022 年 2 月 22 日午後 1:17 UTC](https://www.nocode-faq.com/t/topic/2621/3 "2022-02-22T13:17:00Z")

</div>

ご丁寧な回答ありがとうございます！  
header部分のFixed widthはチェックを外したのですが、うまく広がらず。。

 ![スクリーンショット 2022-02-22 22.15.19](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/53020e06785e6cff3dfa49519784cf93c4d7845c.png)

それともこちらのページ全体のelementのcontainer layoutの部分でしょうか！？

 ![スクリーンショット 2022-02-22 22.00.39](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/33f7816761da585b3ef88ee4e2d9785f7acc4d82.png)

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2022 年 2 月 22 日午後 1:29 UTC](https://www.nocode-faq.com/t/topic/2621/4 "2022-02-22T13:29:26Z")

</div>

エレメントツリーを見ないと何とも言えませんが、  
新エディタのContainer Layoutは、できるだけ「Fixed」を避けてください。  
基本的にはColumnかRow、必要であればAlign to parent、最終的にFixedを使うようなイメージです。

一度Headerの親要素をColumnにして、Max widthを空欄（inf）にしてください。  
そうすればHeader自身もFixed widthを外してMax widthをinfにできるはずです。

新エディタについて分かりやすく解説している動画を見つけました。  
こちらを参考にしながら、まずは新エディタの基本的な使い方、Container Layoutの概念などの感覚を掴むといいと思います。  
[https://youtu.be/aqbxQQeuJQI](https://youtu.be/aqbxQQeuJQI)

NoCodeCamp内でも、定期的に新エディタに関するイベントが開催されているので、そちらに出席されるのもすごく勉強になりますよ。  
金曜日にある「はじめてのbubble」や「プラグインりょうさん」、  
あるいは毎月末に僕が開催している「一緒にバブろう」などに参加してみてはいかがでしょうか🙆‍♀️

---

<div class="post-metadata">

**Author:** ![TOSHI](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@TOSHI](https://www.nocode-faq.com/u/TOSHI)\
**Post date:** [2022 年 2 月 22 日午後 2:25 UTC](https://www.nocode-faq.com/t/topic/2621/5 "2022-02-22T14:25:04Z")

</div>

Fixedはあんまりなんですね。。！  
勉強になります！

YOUTUBEもありがとうございます！  
まさしく求めていたものです！

イベントも参加させて頂きます！  
今後ともよろしくお願いします！😊
