How can I collapse this extra space?

I have a page with a form that has conditional fields (using JavaScript). The fields behave as expected but the form block still takes up the full amount of space even when the fields are hidden, creating a bunch of negative space. Using 'Inspect', I have determined that this space is not the result of padding or empty containers. It's empty flex grid space. The issue seems to stem from the fact that in 'Edit' view, JavaScript is disabled, so all the form fields are visible and therefore I cannot adjust the number of rows for the container to be smaller than the form when it is fully expanded. So then in the live view, when JavaScript is enabled and some fields are hidden, the flex container doesn't shrink to size and displays a bunch of empty rows. I do not have a lot of experience troubleshooting flex boxes so I'm not sure how to "override" the number of rows using custom CSS and would appreciate any guidance! Thank you so much.

Site PW: cupid

Sorry, I put the page link where it indicated to do so but I can't see that it is actually visible anywhere on my post! The url is http://cupidsbacchanalia.squarespace.com/rsvp

I've tried using align-items, flex-shrink, etc. but nothing seems to work. Any ideas?

Having a similar issue on the home page, where I have containers containing paragraph text. The spacing on the top and bottom of the text is greater than on the sides. The latter responds to targeting padding (I don't want to change this), but the former appears to be empty flex box space + padding. It seems to respond initially to changing flex box styling via align-items, justify-items, gap, etc. However, when I switch to editor view, I still can't adjust the container height any smaller to actually even out the spacing (see attached photo). What I would like is for the space on the top and bottom to consist only of padding, so that the text is the same distance from the border on all sides. 

You can consider using Classic Editor Section

On 8/24/2024 at 2:22 AM, tuanphan said:

You can consider using Classic Editor Section

Hi there,

This works to collapse the extra space but now the image in the second section is floating behind the first section. It seems to be a z-index issue but I thought putting the image in the subsequent section negated the need to fiddle with the z-index? Do you know why this is happening now?

2 hours ago, persephone said:

Hi there,

This works to collapse the extra space but now the image in the second section is floating behind the first section. It seems to be a z-index issue but I thought putting the image in the subsequent section negated the need to fiddle with the z-index? Do you know why this is happening now?

Additionally, it seems I can't control the size or masking of the image on a classic section, so I have to leave that in a fluid engine section. But I'm using a background image that I want to be continuous for everything under the first red section. The image is a paper texture so setting it to each section separately creates a seam. I tried Googling about this and only found solutions to apply a background to an entire website (I only want it on this page) or you told someone with my exact request previously to consolidate the sections, which obviously won't work in this case. Am I just screwed here? I've already redone this page like five different times and this is getting frustrating. It doesn't seem like that complicated of behavior. 😕

On 8/21/2024 at 9:36 PM, persephone said:

Having a similar issue on the home page, where I have containers containing paragraph text. The spacing on the top and bottom of the text is greater than on the sides. The latter responds to targeting padding (I don't want to change this), but the former appears to be empty flex box space + padding. It seems to respond initially to changing flex box styling via align-items, justify-items, gap, etc. However, when I switch to editor view, I still can't adjust the container height any smaller to actually even out the spacing (see attached photo). What I would like is for the space on the top and bottom to consist only of padding, so that the text is the same distance from the border on all sides. 

Classic editor doesn't seem like it will work for this issue, either. I seem to have even less control over spacing between elements. 😕

Do you still need help? I will check again

10 hours ago, tuanphan said:

Do you still need help? I will check again

Yes, please! Thanks so much.