![]() It probably needs a few more tweaks, especially with the way the image responds, but overall it's not a bad start. He removed most of the colours from the groups, but they're still there, working their magic. This helps them to behave when the page changes size. Use "center horizontally" and "center vertically" when needed to make sure the distances on either side of an object are even. Make sure everything lines up vertically. Sometimes objects look like they're in a group but they're not. If you see a red border on a group while dragging, it means the object is inside it. Step 11: Add content within the groups.ĭrag elements on to the page and into the groups. Groups can have coloured/gradient backgrounds, borders, shadows or be completely transparent. ![]() Note: The horrible colours are to make it easy to demonstrate. He used "align vertical centres" and "distribute horizontally". Dividing 1200 by 3 and allowing for some spacing, he made these each 360 wide. Step 9: Copy and paste the container below and make some more inner groups. He set 70% min width for each group, so when they get to that width the second drops below the first. Step 8: Check the groups break as expected. 20%) then the groups will just get narrower but never drop below. the width at which the second group will drop below the first. Step 7: Set the minimum width of each group. Use the "hover to show distance" to check you have the same number of pixels gap on each side. Use the grid to space the groups evenly across the space. (The colours are to make it visible) Step 6: Copy and paste that group. His page is 1200 wide so he made the group 560 width so he can have two and still have some space between them. This is how Bubble does margins and padding. ![]() Step 5: Put a group within your container group. You may want to set its max width % so it doesn't stretch in larger browsers. Bubble responsive layout full#Set up a group on the page and drag it to either edge so it's the full width. ![]() Groups give you control over how the elements within them behave. Step 4: Use a group to make a container on the page. Make sure the checkbox is unchecked, otherwise your page will never be responsive. Sometimes this is set to fixed width by default. Step 3: Make sure your page isn't set to fixed width. These will all be helpful for lining things up, which is very important in Bubble. Change the steps to something like 20 or 25. In the Grids & Borders dropdown, select Show Grid. This number will be important later on, so you'll probably want to make it the same on every page. If you follow these 14 steps shared by Kieran from his experience using Bubble on his Twitter : Step 1: Set your page width.īubble defaults to 960 width, but you can change this to whatever you want. It's a no-code tool that lets you build SaaS platforms, marketplaces and CRMs without coders help.īubble has a reputation for being unfriendly for responsive design.īut it's fairly simple to make responsive design using Bubble. Bubble responsive layout code#Bubble: The best way to build web apps without code ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |