Forum Academy Marketplace Showcase Pricing Features

Responsive design issue on larger screens

Hi
If you check out the annotated screenshots below, I have all groups set to the same (1) apply max width is unchecked and (2) minimum width at 20%.
However, when I widen my window beyond a certain width the days of the week group snaps back and stays at a fixed width.
It’s driving me nuts 'cause I cannot see how to fix this.
Any suggestions will be greatly appreciated.
Thanks, Mark.

One idea to solve the alignment of the headers (is that the Main Calendar week group?): put them inside the repeating group. Make that group not visible, collapse when hidden. Add a conditional that makes it visible when current cell's index is 1.

Thanks Rico. I’ll try to figure out how to follow your suggestion.
I’ll update this topic with my results (or lack thereof :wink:

You can do it! :mechanical_arm:

Either Gaby or Greg had a video on this exact topic:
Gaby: https://www.youtube.com/channel/UCTL_mXO3qsgFc_3s2T5wlWg/search?query=groups
Buildcamp: https://www.youtube.com/c/Buildcamp/search?query=header

Thanks for the links Rico :+1:

Hi Rico
Please check the screenshots below.
I followed the video instructions at Responsive Repeating Groups | Bubble.io Tutorial - YouTube
At about the 10mins 20 secs mark I need to reference current cell’s index but as you can see below, it isn’t available.
Any suggestions on where I’m going wrong?
Thanks.

Happy to see you progressing. It looks like the group is not inside the RG.

This is what it looks like:
CleanShot 2021-06-25 at 07.39.28@2x

By the way, you can move elements inside of the tree view (it’s not perfect, but it works):
2021-06-25 07.40.29

Hi Rico
Silly me. Don’t know why I thought it was in the RG :thinking:
Yes, I use the copy/paste often.
As you say, not the best, but it does the job.
I’ll update the post when I get home and work it out.
Many thanks, Mark.

1 Like

Hi again Rico
I made the fix but am still missing something :roll_eyes:
Please check the screenshots below.
Hopefully you’ll spot where I’m going wrong.
Many thanks.

Let me take a few guesses here:

  • those text elements don’t have the same width
  • their fixed margins are different (one might be left ident, the other middle, etc.)

If my guesses are right, what you have to do:

  • make both elements same width.
  • set them to NOT fixed width, set their minimum width to the same number (20% should do it)

(check the first link on this article. It’s a video by Greg from Buildcamp. Their design framework is great.).

Hi Rico
I ended up replacing the RG with groups as shown below.
There are a fixed 7 columns and the RG was a bit of “over-kill”.
Many thanks for your support and I’m sure your answer was the best for the RG situation.
Regards, Mark.

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