Тёмный

Bubble Responsive Design Crash Course 

Matt Neary
Подписаться 19 тыс.
Просмотров 71 тыс.
50% 1

Full tutorial covering everything about how Bubble's responsive engine works. Responsive design in Bubble has never been easier!
🎓 My Bubble course: www.thinkitbuildit.co
⌚ TABLE OF CONTENTS
00:00 - Intro
02:11 - Layout basics
03:21 - Fixed layout
05:27 - Align to parent layout
07:38 - Row layout
19:21 - Column layout
20:59 - Examples of Row/Column combinations
22:37 - Offset basics
23:03 - Margin
24:39 - Padding
30:29 - Gap between
33:26 - Sizing basics
34:22 - Min/max widths & heights
39:55 - Stretch vs shrink modes
42:32 - Sizing constraints
1:03:44 - Conditional behaviour

Опубликовано:

 

27 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 199   
@pranavshirole1
@pranavshirole1 Год назад
You're not just the best Bubble teacher, but the best teacher I have encountered. Thank you so much for your time!
@mneary
@mneary Год назад
Dude thank you!
@ronsoloplz
@ronsoloplz 6 месяцев назад
Agreed!
@nikschimmel
@nikschimmel 2 года назад
This is a really great introduction into the responsive engine. Not only explaining the core concepts, but also showing the different settings and behaviours on easy examples + giving real world examples. It makes understanding everything far better and transferable to own projects. WELL DONE Matt! Keep going
@mneary
@mneary 2 года назад
Thanks so much Niklas!
@phygitalplatform
@phygitalplatform Год назад
Bro you are the most undervalued tutor on youtube and I hope that you will get what you deserve soon! I watch your videos with my both youtube channels account to support you! Thank you for your time and efforts man sincerly I do!
@wighatsuperreggie
@wighatsuperreggie 7 месяцев назад
This is how a tutorial should be done. Someone needs to invent a medal for you.
@XCmdr007
@XCmdr007 2 года назад
AMAZING!!! Best tutorial on the new engine anywhere! Thank you Matt! 👏
@mneary
@mneary 2 года назад
Thanks so much, glad it's been helpful :)
@dmitrii3515
@dmitrii3515 Год назад
Thank you Matt! 🙌 You're a great tutor! Been watching your lectures about Bubble for some time.
@chedmoo1967
@chedmoo1967 2 года назад
Thanks Matt. I appreciate your basic approach as always. You are the best Bubble teacher that I have found. Keep up the good work!
@mneary
@mneary 2 года назад
Thank you!
@Iaintsayinnothin..
@Iaintsayinnothin.. Год назад
Amazing comprehensive tutorial, I went from not really rating the responsive engine too highly (lack of know-how), to realising and understanding how powerful and easy it is to use, its the best page building experience I've had, you can really build whatever you want.
@mneary
@mneary Год назад
I hated responsiveness before the new engine. But I'm so energized by how easy it is to build with the new one! Happy to have helped change your mind 🙂
@JanEngel-fj1ul
@JanEngel-fj1ul Год назад
Thank you @Matt Neary for providing this content! Super helpful to understand the basics!
@hnnhml
@hnnhml 11 месяцев назад
you're so incredibly good at explaining and structuring your explanations. thank you soo much!!
@SianJon
@SianJon 11 месяцев назад
Clear. Concise. Great examples. Thanks Matt! I'll be signing up for your course. Keep the good stuff coming.
@dmintz2
@dmintz2 Год назад
Phenomenal! The best explanation I have seen of layouts of pages and boxes in bubble!
@mneary
@mneary Год назад
Thanks Dan!
@kipyegonkurgat5615
@kipyegonkurgat5615 Год назад
The Imagery and vivid explanations are just outta this world. Thanks, Matt you are so informed.I am out here to impress my clients now🤗🤗🤗🤗👍👍👍👍👍👍
@nickb3487
@nickb3487 Год назад
Wow! what a great way to explain things. You have a gift. I wish all teachers were as articulate like you.
@warrenstrife4818
@warrenstrife4818 Год назад
your bubble tutorials are the best man, concise yet thorough
@visheshgupta4990
@visheshgupta4990 4 месяца назад
Thank you so much really you explained everything very easily , I was little worried how to manage responsiveness in bubble , but your video is like a saviour for me , I see your first video and in your first video the value you provide is just amazing , You are one of the best teacher . Thanks once again . Subscribed
@adalberoncastellofilho3968
@adalberoncastellofilho3968 Год назад
The best information that I found it about bubble! Thanks for this type of information!
@razor2k911
@razor2k911 9 месяцев назад
This is exactly what I needed. Thank you, Matt!
@aysegulylmaz9909
@aysegulylmaz9909 Год назад
New video! Always like a holiday) You're my favorite view bot king
@c0989
@c0989 2 года назад
Excellent, really good tutorial and awesome clear presentation/ video editing. I have subscribed!
@mneary
@mneary 2 года назад
Thanks Ben, glad it was helpful!
@NiceGuyEntrepreneurs
@NiceGuyEntrepreneurs 2 года назад
Loved the examples of how it is used at the end under conditional. That helps me understand and retain the information much better.
@mneary
@mneary 2 года назад
Glad to hear it 👍
@andyillingworth2171
@andyillingworth2171 4 месяца назад
Hey Matt, i just sent a client your way. Happy to see you're still killing it! ✌
@mneary
@mneary 4 месяца назад
Yo! Thanks man! Would love to catch up :)
@noemialamo1690
@noemialamo1690 Год назад
Nice job man, seems like soft soft has gotten a lot more complex since the fruity loops days that I rember. Very helpful, thank you.
@CSscron
@CSscron Год назад
Nice tutorial, I'll test it right now!
@augustoayala5804
@augustoayala5804 2 года назад
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
@mneary
@mneary 2 года назад
Glad to hear it!
@AndrewOnTestingCars
@AndrewOnTestingCars Год назад
Thank you very much Matt! you have been the best person I have come across to learn about Bubble and its best practices! massively grateful! Had found Bubble a bit confusing on the logic side but your videos brought me through, and rejuvenated my interest in Bubble and its legitimacy!
@mneary
@mneary Год назад
So glad to hear it Andrew! It can indeed be difficult at the beginning but it's well worth it!
@AndrewOnTestingCars
@AndrewOnTestingCars Год назад
@@mneary Thank you for your reply, Matt! I'm making a native mobile on bubble, do you have any tips for that? I've just started to convert it to a single-page app, then I will use bdk native to wrap it. Most important thing is that I will be able to use native push notifications.
@SWISSVERSE
@SWISSVERSE 10 месяцев назад
Excellent tutorial. Thank you.
@jennymelia
@jennymelia Год назад
Loved this video! Thank you🤩
@Temitechy
@Temitechy 2 года назад
Absolutely great tutorial. Thank you!
@mneary
@mneary 2 года назад
Glad it was helpful!
@Megasoccerlord
@Megasoccerlord 2 года назад
Incredible content, thanks!
@TheNightsAreOver
@TheNightsAreOver Год назад
This was very informative thank you!
@neveriodev350
@neveriodev350 Год назад
Thank you sooo much, this is the best instructional video I've watched so far!
@mneary
@mneary Год назад
Thank you!
@ryzeonline
@ryzeonline 4 месяца назад
This was excellent, impressive content, thank you.
@AntiGrindServices
@AntiGrindServices Год назад
bro thanks so much, you actually made soft soft easy to understand
@acamilop
@acamilop Год назад
Thanks for the course. Lifesaver. I'm coming from Webflow and Bubble broke my brain.
@devilevic
@devilevic Год назад
What a great video, thank you so much!
@samuelugbaka8692
@samuelugbaka8692 2 года назад
You got a like, a subscriber and a buzzer on from an old guy. TNice tutorials is the best soft soft tutorial I've seen so far. You covered a lot of
@mneary
@mneary 2 года назад
Awesome, thank you!
@alejandroversalli898
@alejandroversalli898 2 года назад
You are amazing, this save a lot of headaches. You are an excellent teacher
@mneary
@mneary 2 года назад
Glad to help :)
@ruslanidrysov336
@ruslanidrysov336 Год назад
You are awesome, man! Thanks!
@wolfik977
@wolfik977 Год назад
Happy bubbling - it'so cute. Thank you very much, Matt. Good job! I agree with others - you're coolest teacher by no-code.
@mortalman6408
@mortalman6408 2 года назад
Superb content clear and concise thanks matt. It has indeed been helpful
@mneary
@mneary 2 года назад
Great to hear!
@briggsy9768
@briggsy9768 2 года назад
Fantastic video, thank you very much for making this valuable information easy to understand.
@mneary
@mneary 2 года назад
My pleasure!
@1000angelpan
@1000angelpan 2 года назад
It Worked perfectly after trying other methods this one was the best one, Thanks.
@mneary
@mneary 2 года назад
Great to hear!
@philippmuller1667
@philippmuller1667 2 года назад
How does this video have so few views?!?! Amazing tutorial, thanks a lot for sharing this with us Matt.
@mneary
@mneary 2 года назад
Cheers Philipp, my pleasure
@spinoff2011
@spinoff2011 Год назад
Great great content man!! Thanks a lot for your time teaching. Greetings from Colombia 🇨🇴
@mneary
@mneary Год назад
Thanks Nicolas!
@sonamnorbu6068
@sonamnorbu6068 2 года назад
You know how to teach really well! Great tutorial 👍
@mneary
@mneary 2 года назад
Thanks!
@jjcc9909
@jjcc9909 Год назад
Bravo! Cheers, from Mexico, gracias
@martinlenweiter7597
@martinlenweiter7597 Год назад
Excellent video ! :)
@JoBernard12oxen
@JoBernard12oxen Год назад
Hi Matt. Thank you for all your hard work and dedication. These videos are essential to an understanding of the Bubble platform. For some reason, put the grand child group into the child, made the child width 0 and in sliding the elements smaller the child AND the parent just performed as if the grandchild wasn't even there. I could see you did it, but I was clearly witnessing that even though I put the grandchild in the child element, when resized, it was ignored, and the parent and child went smaller. I've since erased it, but I double checked to make sure the grandchild was in fact "in" the child. Also, when you click on the parent in the Element tree and right click on the parent it gives you the option too hide the child elements. Thought that might have been useful in a couple places through the video. Outstanding video (as all of them are), and I look forward to learning more soon. Jo Bernard
@mneary
@mneary Год назад
Thanks for the tip - indeed I can let the elements tree get out of hand! With what you described, if the grandchild has a min width then everything should have not collapsed completely. So either there was no min width, or your element heirarchy wasn't what you thought it was. Or it was a (rare) bug 🐛
@united_mates_of_america
@united_mates_of_america 2 года назад
Another great video! Thanks Matt!
@mneary
@mneary 2 года назад
Glad you enjoyed!
@amilliaayu9871
@amilliaayu9871 Год назад
Thanks... it's working... Good Job...!
@azizebennacer2021
@azizebennacer2021 Год назад
THANKS BRO, SO HELPFUL
@JamesDaly
@JamesDaly 9 месяцев назад
This is an incredible tutorial 👏
@paulNocode
@paulNocode 2 года назад
God bless Matt, I was about to pay for a tutorial of same topic. You are the champ
@mneary
@mneary 2 года назад
Cheers Paul 🙏
@levib2162
@levib2162 2 года назад
Thank you for the video Matt. I'm building my MVP. Keep up the good work
@mneary
@mneary 2 года назад
Glad to help!
@yasminvaldelamar3866
@yasminvaldelamar3866 Год назад
Thank you, it works perfect!
@mneary
@mneary Год назад
Great to hear!
@manuelcalvo
@manuelcalvo 2 года назад
Thank you for sharing this tutorial
@mneary
@mneary 2 года назад
You’re welcome!
@osagieohunyan1778
@osagieohunyan1778 Год назад
Nice one thanks for this.
@user-xg7uh7cx5j
@user-xg7uh7cx5j Год назад
Thank you very much. It's a definitely a much better explanation of responsive design than that in the paid course I've bought at Udemy.
@alldatruckus
@alldatruckus 2 года назад
Amazing tutorial ! Thank you
@mneary
@mneary 2 года назад
Thanks and you're welcome!
@gabrielaberon5383
@gabrielaberon5383 2 года назад
Respect to your good work, thanks a lot
@mneary
@mneary 2 года назад
You're very welcome
@elzoguarnieri3207
@elzoguarnieri3207 2 года назад
Thanks Matt! Excellent. Still waiting for news on your new course.
@mneary
@mneary 2 года назад
Thanks Elzo, it's just a few weeks away!
@macads6919
@macads6919 2 года назад
Nice work
@KarlilAmisial
@KarlilAmisial 2 года назад
Thanks so much. Pretty good video
@mneary
@mneary 2 года назад
Thanks Karlil
@Eazihustler
@Eazihustler 10 месяцев назад
Nice one Bro.
@tibuigerard1564
@tibuigerard1564 2 года назад
Just something i realized during your lessons. In the lesson on 'stretch vs shrink modes', It's worth noting that items in a container don't automatically stretch vertically to fill to the container except the container is a column. They also get option to 'fit height to content' when parent container is a column. If parent container is a row, items will automatically shrink to their minimum height.
@mneary
@mneary 2 года назад
Yeah, Bubble has set the default behaviour a little unintuitively IMO. Simpler would be if every element was by default in stretch mode (or shrink) regardless of it's parent container type.
@chrischapman214
@chrischapman214 3 месяца назад
Thank you!
@promisedknowledgeuniversit4645
merci pour le tuto
@KipkuruiClement-bi7qo
@KipkuruiClement-bi7qo 4 месяца назад
GREAT TEACHER
@MarketingWithJeffCaldwell
@MarketingWithJeffCaldwell 2 года назад
Thank you!! You taught me How to mobile design 🔥🔥
@mneary
@mneary 2 года назад
Great to hear 💥
@kallmer
@kallmer Год назад
awesome man
@dmintz2
@dmintz2 Год назад
Thanks!
@inwantOfficial
@inwantOfficial Год назад
even on my weak computer the installation did not take much time, thank you very much
@fatinestiakrajjo7378
@fatinestiakrajjo7378 2 года назад
your courses are great but so underrated
@mneary
@mneary 2 года назад
Thank you very much.
@midlajmc9231
@midlajmc9231 Год назад
It's just awesome
@nikolavisnjic9799
@nikolavisnjic9799 10 месяцев назад
Found my Bubble teacher :)
@SebastianEljaiek
@SebastianEljaiek 3 месяца назад
Hey Matt, what an amazing video, I came to learn about sizing but at the end BOOM ! At 1:07:19 the Sign In box overlaps over the the image. HOWW !? I haven't been able to make stuff overlap. I had given up really
@bizanuralam8458
@bizanuralam8458 Год назад
thanks helpful vid
@comercialvillavicencio5106
@comercialvillavicencio5106 Год назад
Now tNice tutorials was truly an aweso video. I love your thorough style
@mneary
@mneary Год назад
Glad you like them!
@Tom_Mos
@Tom_Mos 2 года назад
Thanks Matt!
@mneary
@mneary 2 года назад
You're welcome Tomas!
@santatrapriscarandria9421
@santatrapriscarandria9421 Год назад
Amazing
@---gachamiki---4245
@---gachamiki---4245 Год назад
YOU ARE A GOD... NO QUESTION ABOUT IT
@adityandradp
@adityandradp Год назад
help, I'm definitely starting to get the hang of it. Just thought I'd share.
@user-wq7zj6de6u
@user-wq7zj6de6u 2 года назад
Bro, you're a great teacher and explainer! Thank you for tNice tutorials tutorial!
@mneary
@mneary 2 года назад
Thank you very much
@abhishekraj3353
@abhishekraj3353 Год назад
🎉Good One
@Babyland23
@Babyland23 Год назад
Congratulations with 6k subscribers 🎉🇺🇦
@mneary
@mneary Год назад
Thanks man, appreciate it 🙏
@elenicelinapereira9061
@elenicelinapereira9061 2 года назад
Show. Parabéns.
@fahmimohamadramadhan3978
@fahmimohamadramadhan3978 Год назад
Super teacher
@juliodraco444
@juliodraco444 2 года назад
Thanks you ...
@classicCyber
@classicCyber Год назад
Matt, you're fantastic. When i make a million $ with my future app, i'll certainly sponsor you 🙂
@chlins
@chlins 2 года назад
Very good this tutorial (class), but very tiring, so much theory. Very easy to understand and remind in your head with real examples and not just squares. The class got much more exciting towards the end (1:03:44 - Conditional behavior), where we see real examples of use. In my opinion, a continuation tutorial is missing. If someone, after the theory, applies it to a landing page, header, login/logout, it is much easier to understand.
@mneary
@mneary 2 года назад
Thanks Charles. You're right that it's a lot of theory - that's quite deliberate as I believe prodding around with the engine before trying to build something substantial is key to understand it. Definitely need to be using the editor alongside the video. But for sure, more practice (and tutorials) would be the next step, as you say. I'm putting these 'continuation' videos together in my bubble course (learnbubble.io/course) but will also have the odd piece of content here on YT.
@eilonlevi3927
@eilonlevi3927 Год назад
Hey! This video is very helpful. Anything changed since the new engine came by? Thanks
@lonjezodzilankhulani6510
@lonjezodzilankhulani6510 Год назад
Reverse margin. Cool term!
@yassinehzami1670
@yassinehzami1670 Год назад
I was surprised how understandable tNice tutorials tutorial is, thanks!
@businessacc179
@businessacc179 8 месяцев назад
So @9:30. you created textboxes on top of the shapes, and it allowed you to select fixed for those groups. On mine, it automatically puts them in the row. I cannot select fixed for some elements and row for the whole page. Can you help?
@johnmarkcachero9005
@johnmarkcachero9005 Год назад
working for today
@diegovillafane6313
@diegovillafane6313 3 месяца назад
Got a question, from the page container which is pacient zero, how should we set the layout, because using fixed layout to position a container with the mouse is deceiving because your page don't shrink or expand if it's fixed, so a fixed parent is useless in almost any case nowadays, few apps are desktop only. So what is the point in doing it? And how should I set the layout of the page container? Which is the most important.
@DelaPisafam
@DelaPisafam Год назад
Nice tutorial I just got the yamaha PSR E363 and I connected it as a midi controller however I can't figure out how to draw the notes with my
@learnandlive9546
@learnandlive9546 Год назад
HELP! When i put a sample into the daw, the sample slides instead of moving in steps, how can i get the sample to move in steps?
@wighatsuperreggie
@wighatsuperreggie 7 месяцев назад
I'm stuck at 8:41 Cmnd-D to duplicate the group. It's the same keyboard command as "add bookmark" in my browser, which is overriding that. I'm hitting copy/paste, but that isn't working. I don't see "duplicate" as a menu item. Is there another way? You also use duplicate when you add numbers to the boxes. It seems that bubble doesn't do copy/paste, or even option-drag. With out the Command-D what can you do apart from recreating the element each time (assuming you don't have a re-usable component... which I haven't learned yet)...
Далее
How data moves through your app - for Bubble beginners
31:26
Она Может Остановить Дождь 😱
00:20
УРА! Я КУПИЛ МЕЧТУ 😃
00:11
Просмотров 723 тыс.
Good database design in Bubble
21:35
Просмотров 40 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,5 млн
How Webhooks work in Bubble
51:57
Просмотров 4,8 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 764 тыс.
How I would learn bubble (If I could start over)
10:56
InDesign for Beginners | FREE COURSE
2:24:16
Просмотров 3,7 млн
Bubble Tutorial for Beginners: How to Build an App in 2024
3:12:31
Webflow EASY Beginner Crash Course 2024
38:39
Просмотров 13 тыс.
Она Может Остановить Дождь 😱
00:20