Where does this large space come from?

alan_sh · Post by **alan_sh** » Mon Apr 28, 2025 4:15 pm

I'm messing around with some design stuff. If you want to see the web site, it's here https://webserve4-nas.synology.me/the-photo-mike/

I've created a flex grid and made it how I like it. It's great on a PC. So it works OK on a phone, I've made a breakpoint at 800px and adjusted the flex grid accordingly. That all works fine down to about 400px. The, I get increasingly large blank spaces between a menu and text.

Here's what it looks like at 600px approx.

When I reduce the size, this is what happens:

And here's a cut down version of my WWB file (no images) so you can see what I've done. Any advice gratefully received.

https://www.dropbox.com/scl/fi/cz3kp3kf ... ggofh&dl=1

Thanks

Alan

crispy68 · Post by **crispy68** » Mon Apr 28, 2025 4:48 pm

If I had to guess it's because your 2nd column (the text in the darker column) is stretching taller and taller which is stretching the overall height of the flex grid. So, the text in column 1 (which is in 4 sections) is adding space to fit within the vertical space created by column 2.

I think it may look better to just have the text in the dark section flip below/above all the links at some point (768px?) and be on the bottom.

Post by **Pablo** » Mon Apr 28, 2025 5:10 pm

I cannot open the project because it uses extensions which I do not have.
can you please remove all extensions and other content that is not relevant to your question?

alan_sh · Post by **alan_sh** » Mon Apr 28, 2025 5:32 pm

Oops - sorry. I'll sort that later tonight.

Alan

crispy68 · Post by **crispy68** » Mon Apr 28, 2025 6:25 pm

The 3 text menus have height in the breakpoint which is adding to the spacing.

You can add some CSS to adjust that between the <head> tags:

Code: Select all

<style>
#wb_TextMenu1,#wb_TextMenu2,#wb_TextMenu3{height:auto;}
</style>

Also, I would make the text in your right column all 1 text box versus 3.

Next, I would in the breakpoint add a 4th row and extend 'section1' into the 4th row for overflow of the text which would help also.

In your default view of the flex grid you can simply your layout a bit to look like such:

alan_sh · Post by **alan_sh** » Mon Apr 28, 2025 8:50 pm

alan_sh wrote: Mon Apr 28, 2025 5:32 pm Oops - sorry. I'll sort that later tonight.

Alan

It's fixed now. Same link, but no WBX files.

alan_sh · Post by **alan_sh** » Mon Apr 28, 2025 8:58 pm

Ron, I tried that code, but it made no difference.

I will sort out the flex fields, but as that is in the default BP, I can't see how it affects the spacing I see.

Alan

crispy68 · Post by **crispy68** » Mon Apr 28, 2025 10:30 pm

@Alan,

I tested it on your demo and my code definitely works. However, as suggested you need to add a 4th row in your breakpoint for best results.

Like I mentioned, the gap is created by the 3 text menus you have. They have a fixed height in the breakpoint which is causing the extra spacing. My code eliminates the fixed height.

However, the 2nd column is long...way longer than your first column. You are stretching out 3 cells in column 1 over 1 long cell in column 2.

Even though you have the height set to auto for those 3 cells, they still have to expand/cover/stretch the entire length to equal column2.

So my suggestion was to add a 4th row in the breakpoint and extend column 2 to this 4th row only which allows for it stretch over longer area and keeps the first 3 cells in column in the top 75% of the grid.

alan_sh · Post by **alan_sh** » Tue Apr 29, 2025 7:58 am

Ah, I understand. I'll give that a go after breakfast.

Alan

alan_sh · Post by **alan_sh** » Tue Apr 29, 2025 8:18 am

Yes, that has fixed the issue.

Thank you.

Alan

www.wysiwygwebbuilder.com

Where does this large space come from?

Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?

Re: Where does this large space come from?