Reduce padding in Bubble marketing template

Hi there,

I’ve created a couple of landing pages using the Bubble extension. So far so good, I’ve used the standard page before but using the free Bubble marketing page one for the other. I hid some of the elements/blocks by unchecking “this element is visible on page load” so that works fine but now I’m not sure how to reduce the space between the visible elements/blocks without ruining the entire page.

So far here’s what the page looks like on desktop versus mobile. Desktop looks great but mobile looks very odd with the spacing and needs fixing. Just want to make sure I’m doing it right without damaging the entire template structure.

Thanks!

Hello @lizzyazuya

It is very difficult to suggest a fix without knowing more.

Where is the problem … on the Canvas html marketing page? … Or on a Bubble page that has been built as a landing page?

This is a Canvas template Free Bubble Marketing Page - Canvas Pages and Modules

How do I fix padding on this page for mobile (only) after hiding the sections I don’t need given that the desktop version looks fine per video above.

Also not sure why the video didn’t scale the page properly for mobile but if you go here and inspect page you can see mobile padding is off out of the box (no edits):

Here’s my own page for reference: Free Bubble Homepage Blocks

@lizzyazuya

Thanks for providing further info! :grinning:

My take is that perhaps some elements were moved around in a way that did not preserve the usual vertical stacking of groups/elements that Canvas uses. There is a clear warning on the documentation about this (not strictly the way I explained it … but it is the same result):

To explain how Canvas manages vertical distance is a bit elaborate. The video below provides a thorough explanation (applied to a specific page in Canvas … but the principles are the same for all)

Hope this helps! :grinning:

To clarify @cmarchan, I didn’t actually move anything around. I followed the instructions per the documentation and only hid elements I didn’t need by unchecking the box “this element is visible on page load”. Besides that nothing structurally was moved so I was confused when on mobile the template is weird.

I didn’t want to tamper with the template structurally at all that’s why I reached out. It is a template issue. You can see here on the original template link when I inspect on mobile the padding is also too much between sections https://adassets-002-300-020821.bubbleapps.io/new_page-freeblockshomepage



How can the padding be fixed, looks like it will have to be from the Canvas end? The instructions don’t cover padding adjustment

Thanks!

Hello @lizzyazuya !

Considering the additional information that you kindly laid out, one of our colleagues took another look and there is indeed a lot of space on mobile within that page template. We will be updating it in the near future. Thank you for flagging! :grinning:

The best option to reduce the padding on mobile would be to add transparent group elements between sections, that are visible on page load, but become hidden on mobile. Below a few screenshots:


Hope this helps! :grinning:

Thanks @cmarchan!

About to try this now. To clarify, what did you use to add the transparent group element(s)? is just visual elements > shape and then you created a style?

Hello @lizzyazuya

Group elements work best. Set them as hidden and to collapse when hidden. :grinning: