Responsive design: Getting started with Bubble (Lesson 5.6)

Section 5 (Lesson 6/8): This lesson will focus purely on responsive design. We’ll make sure our design looks fantastic at different breakpoints and that we’re considering how certain elements behave at mobile phone width.

We’ll also cover:
• Page width conditionals: How to change the size and layout of certain elements — like inputs, buttons, and text elements — at smaller page widths.
• The responsive tab: The best way to approach working in the responsive tab.
• Industry design standards: How to choose the correct padding and sizing for small page widths.

Resources folder:

Bubble editor:

* * * * *

Subscribe to this channel to be the first to hear about new videos!

Bubble is a software development platform that enables anyone to build and launch web applications without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. That means anyone from first-time entrepreneurs to enterprise-level companies can take an idea from concept to fully functional, scalable reality — faster and cheaper than you could with just code.

Learn more about Bubble:

[khizarkhan]

There is an issue with header Navbar, It still has conditions set, but when I change the size to 576px in responsiveness tab, it becomes messy, even I checked the demo app too, same is the case there as well.

[handsome_wellaged]

I was planning to build separate pages for mobile, this saved me tons of hours. Thanks a ton!

[williamdanielsen]

I can't set a min width conditional expression as an option when I set a condition for current page width < 768. The only option is just Width, but it doesn't offer the options to measure in percentage of space, only measures in pixels

[ErinSimsKamloopsRealEstate]

How did you fix the missing portion of the Navbar border?

[studioio]

Who did the volume for these videos? I've been following along from Lesson 1 and every video seems to be at a different volume level. This is really not a great look. Otherwise these have been awesome. Please fix these for future viewers!

[iceandarcane]

4:07 The previously set conditional for the Reset Button (When Input Search's value is not empty orDropdown Type's value is not empty orDropdown Skill Level's value is not empty
This element is visible) will be removed.

[RainbowRainbowRainbow-cx]

I'm a non-developer, could you help me? Seek advice on how to implement the following

I'm just wondering how to randomize the values in a data field.

Specifically,

The signup page only has fields for email, password, and password confirmation. There is no nickname field.

User enter these information and press the Sign-up button ->

One of the 1000 nicknames previously stored in the 'nick name' field of the 'User' data type is randomly designated. ->

This nickname display in the nickname field of his profile page.

This nickname does not change forever.

[richardstuart]

FYI - Nomenclature has changed and "Width" is now "Min Width"

[prabhakararao]

Looks Good, but some information required, how it will integrate with SAP ERP portal products ?