Collapsing effect (white gap on desktop when text is uncollapsed)

Recently I saw a wonderful video of the Code Queen about how te create a collapsing effect. But the funny thing is, it only works fully on mobile and not on desktop. When the text is uncollapsed (so before one clicks on the ‘Read More’ button) there’s a big white gap between de button and the strip-image underneath (as you can see on the attached screenshot). However, on mobile it works fine (the uncollapsed and collapsed text). No white gap there.
I’ve tried all kinds of things, and asked around. I have no idea how to fix this. I really hope someone can help me with removing the white gap on the desktop version of my site: ZINGO POW!

Many thanks in advance!
Kind regards,
Roxsane

Hi, Roxanne.

When I view the source of https://www.zingopow.com, I see several instances of visibility:hidden

"visibility:hidden means … the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn’t seen on the page.

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other tags."

See if you can replace instances of “visibility:hidden” with “display:none”.

HTH,

Art

Hi Art,

Thank you for your quick response! I’ve checked the code, but the words “visibility:hidden” aren’t there.
As you can see below. Do you have any other idea how I can get rid of the whit gap on the desktop version?

BR,
Roxsane

Code of my website:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
//TODO: write your page related code here…

});

export function buttonReadMore_click() {
if ($w(‘#boxExpand’).collapsed) {
$w(‘#boxExpand’).expand();
}
else
$w(‘#boxExpand’).collapse();
}

export function textExpand1_click() {
if ($w(‘#boxExpand’).collapsed) {
$w(‘#boxExpand’).expand();
}
else
$w(‘#boxExpand’).collapse();
}

export function textExpand2_click() {
if ($w(‘#boxExpand’).collapsed) {
$w(‘#boxExpand’).expand();
}
else
$w(‘#boxExpand’).collapse();
}

export function buttonExpand1yes_click() {
if ($w(‘#boxExpand’).collapsed) {
$w(‘#boxExpand’).expand();
}
else
$w(‘#boxExpand’).collapse();
}

If you want, I can take a look at your edit mode; would need the URL.

Hi Roxsane,

The whole problem caused by the strip column that you wrapped your site with ( columnStrip7 ) .
Removing that strip will solve the problem.

Best,
Mustafa

Hi Aberquist and Mustafa,

Thanks for thinking along! The problem is solved :slight_smile: I rebuilt the whole page and now everything seems to work.

BR,
Roxsane