05-Widths__Margins__Padding - SCAI004

In this video, we're going to be looking at a few more settings that will affect your responsive behavior with your visual designs. We're going to be looking at widths, heights, margins, and padding. These settings will affect your element's dimensions as well as the space in and around the elements individually. So combining these various settings with each other will allow you to create custom layouts, custom designs, custom positioning Let's start with the width setting. So I'm going to select this Submit button and right now we can see that this button is set to a fixed width of 200 pixels. With fixed widths and even fixed heights, that means that Bubble is not going to change the width depending on the device size. So whether your screen is larger or smaller, it is going to be fixed to that size. That could be exactly what you want. It could also be the wrong setting if your fixed width is set too large for a smaller screen size or maybe too small for a larger screen size. So when we remove the fixed width setting, we'll have a little bit more control over a variable width so that Bubble can change and expand or contract the dimensions of the element based on the parent container. So the parents will always affect things inside of it, so you always want to start on the outside and work your way in. But at the end of the day, if we're on a smaller screen, we want to make sure that these elements don't get cut off, that they take up the appropriate amount of room. So at a fixed width setting, right now I can see that this is set to 200 pixels. You hover over this and it's telling you 200 pixels wide. If you don't see this measurement appearing there in your editor, just head over to the Grid and Borders menu and open up the Show Distances on Hover setting. You can see 200 pixels wide and 60 pixels tall. Now a pixel is just a unit of measurement. So you measure things in inches, yards, centimeters, miles, right? A pixel is what we measure distances with in web design. Now you can change this configuration to set the width based on a percentage. The percentage is going to be relative to the element's most immediate parent. I'm going to change this to 50% here. Okay, so now this button is 50% of its parent element. Now if I hover over the button, you can see that that means it's 480 pixels wide, which means that the parent needs to be double that, right? If the button is half of its parent, 50% of its parent, 480 needs to be half of this group's width. Now I can see that this group is fully expanded to the width of the page, so I can check out the page dimension here. The width for my UI builder is going to be 960. 960 is what? Double 480. Okay, now if I change this to 100% of its parent, notice that it moves on to the second line, right below this cancel button, because there's not enough room to fit both the cancel button and the submit button. If I'm telling Bubble to fix the submit button to 100% of its parent, it has to be moved over to the second line so it can take up that full space. You can see now at 100%, the width of this button is 960 pixels. Okay, so I'm going to take this back to 200 pixels, right, and I'm going to now uncheck that fixed width setting. Without the element being fixed, we have more options available to us. Now we can define a minimum and or a maximum, and we can also have the button fit its width to the content. In this case, for a button, the content is the label. Okay, so depending on the element you're working with, the content might mean something else. With text elements, it's just the text itself. All right, so before we look at the fitting to content, let's take a look at the minimum and maximum, and the best way to demonstrate this is to open up the responsive viewer here so we can see the behavior at different breakpoints, right, so we have our desktop size, our tablet size, our horizontal or landscape mobile, and then our portrait mobile. Now if I'm at, let's say we're at 992, this tablet size here, and the minimum width of my button is 800, okay, it's going to force it down to the next line because there's simply not enough room to fit both the button and the cancel button on one line here, given that this button has a minimum of 800 pixels. If I move up to the 1200 screen size, so more of like a laptop or desktop, there now is plenty of room to fit a button that is at least 800 pixels, as well as another button over here, which right now it's set to 200, so 800 and 200 gives us a thousand, that still leaves us 200 pixels space on the page, so they can both fit on one line. I'm going to come back to this tablet size where the button is forced to come down below. Let's say I bring down the minimum width to maybe 200, okay, so now at the tablet level, this button can fit on one line because the bubble can now make the width smaller because the minimum isn't as high, right, we're allowing bubble to make the button more narrow. I can be more drastic with this and give it a minimum of 50 pixels, or better yet, I can give it no minimum, and as I move the page smaller and smaller and smaller, the button gets smaller as well. I don't have a minimum set, so it's just going to shrink down, this is probably not a design that you'll have anywhere, right, but because I've set the minimum to zero, it's not going to stop me, unless I have the minimum, so if I put, let's say, 50 again, okay, there's going to be a point where the button's going to stop shrinking, wherever that 50 pixel is, right about there, okay, and then it's going to push it down to the next line because now there's just not enough room for the cancel button, which requires 200 pixels of space, so you'll see that elements can affect other elements, you know, the positions they are in on the page within the same container, just because this submit button has a very low minimum doesn't mean that it can't go to the second line because there's another element on this line that may force it to that second line because this element has a fixed setting. Now, if I take them both down, let me give them both a minimum of 50 pixels, so combined, we're just looking at a minimum of 100 pixels needed to have them both on the same line here, so you can see now they're much smaller. The same is going to be true for maximum width, right, maybe I don't want Bubble to do this, right, maybe these buttons are way too wide and I really want it to stop growing after a certain point, so I can give these buttons a maximum width of, let's say, 100 pixels, okay, same thing for this button, maybe I'll do a little bit more, maybe 200 pixels for both of those buttons there, okay, so maybe this feels more comfortable for me. As the page gets smaller, you know, they start to compress down because they haven't hit their minimums yet, but as I grow it, there's going to be a point where the page or the, really, the container is now far too large for the button and so we want Bubble to stop growing them. Now, fit width to content is going to, let me check this box for both of these, you can see here, you see how it changes the width to fit directly around the text? If you have a minimum width and you have a fit width to content setting enabled, Bubble is going to take the larger of the two, right, so if my minimum is set to 200 pixels, this is on the submit button here, I just made that change, notice that it's no longer fitting to content because the minimum is larger, it's going to take priority, right, if I don't have a minimum, then we're allowing Bubble to just keep the width directly around the text. Now, that might feel a little bit too tight for me, right, which is maybe why I would want to have a minimum here so that I always have a little bit of breathing room around that text, but in some cases you may not need a minimum, you just want the element to fit directly around the text like this. I'm going to bring this back to a fixed width setting of 200 pixels for both of these and now we're going to take a look at heights. Heights are going to work very, very similarly. We have a fixed height setting, minimum height, and a maximum height, and notice that you can leave all of these blank, so you don't have to have values here. If you don't have values there, you're allowing the responsive engine to fully expand, fully contract wherever possible. So right now, these elements have a minimum height, both of them, yes, both have a minimum height of 60 pixels, so I can remove the minimum and you'll see how it fits directly around the content. I can also adjust the minimum to something that's taller. I can also give it a maximum, let's say a maximum of 200. Now, this maximum is going to be harder to see because my alignment setting of this button isn't really forcing it to stretch. Okay, so I'll show you the difference here. I'm going to remove the maximum. Now, if I change this alignment setting of the button to this vertical stretch setting, you see that it stretches to the extent of its parent, right, the top and bottom boundaries of its parent, but maybe I don't want it to do that. Maybe I want to give it a maximum height of, let's say, 80 percent, so 80 percent here, of its parent. You see how it came up a little bit? It's still expanding, but not all the way. There's still 20 percent of space there. Okay, so you can really combine, mix, and match these width and height settings, even with the alignment settings, to control, you know, the dimensions overall. All right, so I'm going to get rid of that max height, and let's bring this back to the center like this, and we'll also give this back a minimum of 60 pixels. Now, let's take a look at our margins and padding settings. Margins and paddings are two different ways of creating space in and around your elements. So, if I take this cancel button, let's actually, let's do something here. Right now, this this container, this group, has a gap spacing of 20 pixels, which is creating this 20 pixel space in between both of my buttons, but to really demonstrate the margins and padding, I'm going to remove that so that they're right next to each other. Again, this is just another setting that you can mix and match. Okay, so if I take this cancel button, and I give it a right margin of 20 pixels, I've created that same effect. Now, it really just depends on how many elements are involved, what your goal design is looking for, because there are multiple ways to achieve the exact same layout, but some settings might be more efficient than others, and I recommend you start from the outside, work your way in, start with all your containers, get all of the positioning right, the dimensions right, the widths correct, create any gap spacing you need, and then make finer controls over the individual elements from there. You don't want to spend all of your time creating all sorts of margins around every single individual element, when you can likely create a lot of that just at the container level with your gap spacing. These settings that you have here, but let's say you do need finer control over an individual element spacing, so you have individual margins that you can set here. I'm going to add another button to the other side of the cancel button here, so we can see. Right, so I have 20 pixels margin on the right, let's give this another 20 pixels on the left, and so I have some even spacing there. Same thing we can do top and bottom. I'm going to change this group's height to fit to content so that there's no minimum. You see that there's a minimum of 300 pixels, and remove that, you see how the group now fits perfectly around its inner elements, it's fitting to content. And so now I can, we'll be able to see more obviously here if I do 50 pixels top of the button, 50 pixels bottom. So margins create space around an element, around an element, outside of the element. You know, here's the difference with padding, we remove all of these margins. So padding you're going to find on containers, you're not going to find those on many of your other visual elements. So containers here, this group, you can see that it also has margins, so I can add a margin of like 500 pixels at the top, it's going to push it way down. Right, so padding will add spacing inside of the element, so if I give this group a padding of 50 pixels, you see that it actually expanded the height of the group rather than push the group down. So that's 50 pixels padding on the top, here's 50 pixels padding, or sorry, here's 50 pixels of margin. Right, so margin pushes the element down because it creates space outside of it. Padding actually expands the height of the element because it's creating space inside, so it needs to push the elements down in order to have that 50 pixels. Okay, so I can do the same thing on the bottom, this, also on the left I can, you know, push those over like that. So this is another way to affect the positioning of all of your elements by working with margins and padding because you're creating space around and inside of this. If we actually look at one of our examples from our previous videos here, we can change the way this header is designed by leveraging margins and padding as well. So this center group here, which contains the menu buttons, it's actually not perfectly centered inside of the black header behind it. So what I can do, instead of setting this group header to a row, I can change this to an aligned parent setting. So now my logo is fixed to the left, non-end, my text over here is going to be fixed to the right, non-end. Let me actually, uh, let me unlock my editor, oops, let's unlock property editor so I have a little bit more room here and I can get this out of the way. Okay, so you see how this, this group here, the parent, that contains user info and settings, this is over to the right, non-end, and now this group is fixed in the center. Now this is much more perfectly centered inside that group. However, I don't really want these texts to be hugging the very edges of the page. I want a little bit of spacing there. With this aligned to parent setting, I need something to push these items inward. So what I can do is either I can give those elements margins, so the logo can have a 20 pixel margin to shove it over to the right a little bit, and then this group over here can have a right, let's see, a right margin of 20 pixels. Okay, so now we've moved them over. That's one way to achieve that design. Or, I'm going to undo this, I can add padding to the group overall and now I'm affecting only one element and getting the benefit of having multiple inner elements pushed. So this group header, I can give it a left padding of 20 pixels so it shoves everything over. Same thing, 20 pixels on the right. I could even do it on the top and bottom. Let's say I wanted 20 and 20, so that actually offsets each other. But let's say if I only wanted 20 pixels on the top, you can see how it expanded the height a little bit to push them down. All right, so I have a lot more control at the group level. That's, again, another example of why I always recommend starting on the outside and work your way in. Start with those containers first because you have a lot of settings that can actually affect everything inside of it and save you a lot of more of those granular controls that may not be necessary. If you feel like you're having to mess with individual settings too much to get the perfect positioning, you're probably overdoing it. You need to take a couple steps back. Maybe you need more containers, maybe you haven't grouped things enough to take advantage of those settings. So there we have it. We have our widths, our heights, the various responsive controls to affect those dimensions, whether something fits to content or a minimum or maximum. You're working with pixels versus percentages. And we also have your spacing controls by working with margins and padding. And really, combining all of these settings in a custom way, and that even includes your alignment settings, will allow you to create the exact layouts that you're looking for. I encourage you to get your hands on it so you can get comfortable with the different behaviors. Also keep in mind that, you know, there are many ways to achieve the same design. But you'll soon pick up on the patterns, what's going to become more frequently used, what's the most efficient, what's the most reliable for your designs. All right everyone, enjoy!