Best-practice 2-column page layout? (help)

I have a:

Parent Group: Column

  • Left Column Group:
  • Right Column Group:

I the left/right as 60% / 40% on desktop, then 100% on mobile screens. My only issue is that when I define a column gap between Left and Right column, they wrap on desktop.

I thought Width % was of available space from the parent, this obviously doesn’t include column/row gaps? I thought they would be treated the same way that padding is i.e. if Parent Group ends up being 700px, with a column gap of 15px, the Left/Right columns should be taking a % of 685px (700px minus 15px).

Can anyone help with the best approach for this? I have bumped them to 59% / 39%, but I don’t like the solution

I believe you are using the Row Layout, not column, as a column would not have a left or right, but a row layout could have a left or right.

That is because of the fact that 60+40=100% so adding in a gap, there is extra space. Bubble has not updated things to account for row or column gaps when utilizing the % for width or heights.

Correct

You would be correct to think that. But, Bubble did not incorporate that thinking into the development of the responsive editor.

Use custom CSS and the calc function to change it.

You should be able to search the forum to find various threads on how to use custom CSS to adjust the width and height of an element, and likely the calc function too…if not Google will have a lot of resources on how to use the calc function in CSS.

One plugin that could be of much help (and the thread) is the Classify plugin.

I personally thought when the flexbox system was introduced I’d no longer need to use Custom CSS and the classify plugin, but I was wrong as there are a lot of situations in which I need this still today to get my designs perfect for all screen sizes.

1 Like

Sorry yes, row.

Thanks for your reply - it at least helped me think through this. What I did was add Left padding to my element on the right, and then set them to 60/40 %. This has worked.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.