Collapsed Strip Misbehaving Inexplicably

Hi Wix,
I’ve added collapsed strips on my site, www.bragebangfitness.com. You expand them by clicking on a box on top of another strip.

The first collapsed strip, on both the homepage and on the ‘coaching’ page, opens with the background off-center and small, only correcting itself to fullscreen width if you wait a long time ( 10+ seconds) or close and re-open it. I’ve tried remaking the strips identically, and changing around their contents, but nothing seems to fix this issue.

They’re supposed to stretch to full width, and when they’re not, they make several other elements look weird!


This is how it’s supposed to look (and how it opens in the editor in preview mode).


This is how the background loads on the live site.

The code I use for the expansion looks like this:


Where columnStrip25 is the expanding strip.

A couple of points to add to the confusion: the strip with the blue bubbles in the background is actually a strip ON TOP of columnStrip25. There are a number of strips that expand simultaneously, and they way I achieved it was to place them all inside of cS25. cS25 is actually warping the background of all its daughter-strips, it’s just harder to tell b/c they have the same colour background.

Anyone who can solve this for me gets a crisp internet high five, and my eternal gratitude.

Best regards.
Brage

I read through Velo: How Page Layout Is Affected When Elements Change Size | Help Center | Wix.com, but no luck explaining the background shift.

Anyone else experienced anything like this?

Hello Brage,

This doesn’t seem like an issue with the code, more likely an element property or setting is causing this to happen.

A few things to check for:

  • Make sure your strip only has one column, the parent and the children that may be nested inside as well.

  • In the ‘Layout’ section of the strip, make sure to align content to the middle

  • Click on ‘Change Strip Background’, a dialogue box will open with options you can choose for the background of the strip as well as the currently selected one. On the currently selected background section there is a cog wheel, that is the icon used for settings part of the background image, click this. Scroll down to the ‘Position’ option and make sure that this strips background position is in the middle, like so:


Hope this helps,
Majd