Page 1 of 1
Where does this large space come from?
Posted: Mon Apr 28, 2025 4:15 pm
by alan_sh
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
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 4:48 pm
by crispy68
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.
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 5:10 pm
by Pablo
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?
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 5:32 pm
by alan_sh
Oops - sorry. I'll sort that later tonight.
Alan
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 6:25 pm
by crispy68
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:
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 8:50 pm
by alan_sh
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.
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 8:58 pm
by alan_sh
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
Re: Where does this large space come from?
Posted: Mon Apr 28, 2025 10:30 pm
by crispy68
@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.
Re: Where does this large space come from?
Posted: Tue Apr 29, 2025 7:58 am
by alan_sh
Ah, I understand. I'll give that a go after breakfast.
Alan
Re: Where does this large space come from?
Posted: Tue Apr 29, 2025 8:18 am
by alan_sh
Yes, that has fixed the issue.
Thank you.
Alan