But the problem is that when viewed on a large desktop screen the cells do not widen to accomodate the new wide page. Instead it changes the repeating group to be 10 columns. This is messing up my design.
I need it to always stay at 7 columns so that it aligns with the 7 days of the week. The cells should grow wider instead of adding more columns.
I am new to learning about the Bubble responsive engine, so the answer may lie there, but I can’t figure it out.
I have annotated a screenshot here (in red) to show how it looks on the front end:
Incase anyone else finds it helpful, I fixed it by doing this:
Made the reusable 1920px
Set a max width of 1920px on a container group that contains everything in the reusable (not the reusable itself).
Design it for that larger screen, and then everything shrinks down correctly. Setting a max width on the container group ensures it won’t go out of alignment on screens larger than 1920px. Anything above 1920px would be a super rare screen size, but you never know.
Anyway you could make a public editor page view to help me out? Trying to do the same, but I’m having trouble getting this to be responsive so that only the 7 columns stretch the page.
P.S. This example calendar is using the default Calendar Tool plugin. The one I am using on my own app is a modified version that outputs exactly 42 days per repeating group. That will stop the blank days showing at the end of the calendar. I’m not wanting to share plugins on the market place just yet, so you’ll have to make your own version to fix that particular bug. All you have to do is copy the original Calendar Tool plugin into your own plugin, delete the line that says const endDate = moment(properties.month_date).endOf('month').endOf('week')and replace it with const endDate = moment(startDate).add(41,'days'). Then use that modified version in place of the original Calendar Tool.
