Making a group responsive for mobile devices (height is clipping content)

ffumarola · 2021-01-29T20:58:58.977Z

Hey there!

I have a page integrated with a plugin. The plugin is contained within a group which is then contained within another group that has the page as it’s parent. The entire page works responsively quite well, other than this section of the page with the plugin. The height does not adjust as needed to incorporate all of the content’s plugin, to the point where on mobile it is virtually unusable.

Things I have tried:

Turning on “collapse height” for both groups above the plugin
Turning on “collapse height” for every single group on the entire page
Using a floating group
Setting an image with no src and telling it to maintain proportions and setting a min-width

None of these have helped, and I’ve searched these forums for a couple of hours trying the above. Anyone have a better idea?

ffumarola · 2021-01-30T01:38:29.919Z

I do have something working finally, but looking for less of a hack still.

What works:

Create text element in the parent group of the plugin
Don’t have any text, set it to 1px by 1px, and then set a condition when the page width is <X px to add line spacing of whatever height you need. Make sure to place it far to the side as the element could block other elements that need to be clickable.
Set the fixed height of the plugin to be as tall as needed for these smaller screens. In the visual editor, it will make it look like the element is super tall and layered over other things, but because the group above it has a height that is fixed… it will constrain the plugin unless the text element hits the condition to increase line spacing.

cmarchan · 2021-01-30T06:14:16.389Z

Hello!

Place the plugin in a popup that you never open.

This way you will make sure that it does not affect any row or overlapping element on the page.

Hope you sort your issue

aj11 · 2021-01-30T12:08:44.164Z

You could try adding an ID to the plugin element and applying the following css in the HTML header section of your page settings:

<style>
#idofpluginelement {
display: block !important;
}
</style>

ffumarola · 2021-01-30T15:50:46.566Z

So the plugin actually outputs content that I need to be on the page, so I don’t think this would work.

boston85719 · 2021-01-30T16:04:16.404Z

What plugin are you using?

Most plugins that are not an actual visual element, but instead just need a plugin element on page to function but is not visible have an option to change the height and width…most of the time best way is to make that plugin element live on the page, put its height at 1 and width at 1…then place that plugin element at the bottom of your page.

So lets say everything is contained in a single group that is supposed to take up the entire page height, just make the page height 1 px taller than the group and put the plugin element at the bottom of the group.

Alternatively you can try it the opposite way and put the plugin element at the top of the page at X Y 0 and then usually it will be under a header element which if its a floating group should not be affected in terms of responsiveness.

Top of the page or Bottom of the page is where I put all my plugin elements.

ffumarola · 2021-01-30T16:26:44.468Z

Maybe I shouldn’t have used “plugin”, but the plugin I installed has a discrete purpose of inserting content into the page and needs to be visible.

boston85719 · 2021-01-30T16:36:24.441Z

What plugin are you using?

ffumarola · 2021-01-30T18:08:43.476Z

Billflow

cmarchan · 2021-01-30T19:30:03.159Z

Popups are loaded to a page as a Bubble default function. You could set the plugin to be visible there. Since you will never open the popup it will not affect any responsiveness of the page at all … and it should serve whatever function is intended to deliver.

ffumarola · 2021-01-30T21:41:52.792Z

Maybe I continue to misunderstand, but again this plug-in is not simply to load functions. It is injecting content into the DOM that must be visible in a specific portion of the page, which is where I have placed the plug-in. Moving the plug-in to an invisible element defeats the purpose of the plug-in.

nocodeventure · 2021-01-30T22:08:29.756Z

Adjust the elements height manually inside the elements editor, this will override the group it’s in and allow it to be full height in most use cases.

The plugin height would be 900px for example and the main group 450px, do not stretch the main group with your mouse as it will jump to 900px.

This option might cause bugs, but should be fine on most cases.