Wonderful Image Slider Width

[dennis1]

Hello!

Maybe i’m the biggest newb around and i’m fairly new to bubble, but i cant seem to make my image-slider responsive by setting the width to 100% like in this demo example: https://wonderfulplugins.bubbleapps.io/wonderful-slider?utm_source=zeroqode&utm_medium=referral&utm_campaign=btn_demo_plugin

Love to learn on how to do this!

Dennis Sikkenga

[mina.rotari]

Hi @dennis1 ,

Thanks for reaching out!

To help you get the slider working responsively, I need to gather a bit more information:

Questions:

1. Is your Bubble app set to Responsive mode?
   In the Bubble editor, please check if you’re working in “Responsive” mode (there should be a tab at the top showing “Builder” and “Responsive” - see if Responsive is selected). The demo you referenced (https://wonderfulplugins.bubbleapps.io/wonderful-slider) is built in Responsive mode, which is essential for 100% width to work properly.
2. Element configuration:

• Have you placed the wonderful-slider element on your page?
• What width setting have you applied to the slider element? (It should be set to 100% in the Layout settings)
• Is the slider placed inside a container/group? If so, what are the width settings of the parent container?

3. Current behavior:

• What is currently happening with your slider? Is it staying at a fixed width, not filling the container, or something else?
  
  

Looking forward to helping you resolve this!

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble

[dennis1]

Hello! thank you for the reply

Yes, the slider is staying in fixed width and not filling the container. I’ve added the slider element to my page inside of a group which is set to 100% width.

I’ve added a screenshot of my workspace. Maybe you can see where i’m going from?

Love to hear from you!

[constantin.raicovici]

Hi @dennis1

Thanks for the screenshot, and for your patience over the weekend.

From what we can see, the Wonderful Image Slider itself is behaving correctly. The reason it’s staying at a fixed width is related to the layout rules of the parent group, not the slider element.

Here are a few things to double-check in order:

1) Parent group layout

• Make sure the group that contains the slider is set to Layout → Row or Column (not “Align to parent”).
• The parent group should have:
  • Width: 100%
  • A defined max width (optional, but recommended)
• Avoid fixed pixel widths on the parent group.

2) Slider element settings

• Slider width: 100%
• Minimum width: 0 (important, otherwise Bubble may keep it fixed)
• Make sure it’s not pinned left/right in a way that forces a fixed size.

3) Check for nested containers
If the slider is inside multiple groups, any one of them having:

• a fixed width, or
• “Align to parent” layout

will prevent the slider from expanding. This is usually the main culprit.

4) Responsive mode
You’re already using the new Responsive engine
Just make sure the page itself doesn’t have a fixed width constraint that limits children.

If you’d like, feel free to share:

• whether the immediate parent group is Row / Column / Align to parent
• or a short Loom showing the group tree

and we’ll point out exactly which container is blocking the responsiveness.

Once the parent layout is adjusted, the slider will stretch just like in the demo.

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble

[constantin.raicovici]

Hi @dennis1,

Just checking in to see if you had a chance to try the layout adjustments we shared earlier and whether they helped with the slider responsiveness.

If the issue is still there, feel free to let us know:

• what layout the immediate parent group is using (Row / Column / Align to parent), or
• share a short Loom showing the group tree, and we’ll pinpoint exactly what’s blocking the width.

And of course, if you’ve already managed to sort it out on your side, we’d love to hear that too

Looking forward to your update and happy to help further if needed.

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble