Page 1 of 1

Empty space when scrolling to bottom of pages for desktop/laptop screens but none on mobile screens

Posted: Fri Jul 16, 2021 9:47 am
by Makintosh
Hi! This concern might have been discussed before but I can't seem to find the appropriate search keywords in this forum.

I designed 3 breakpoints (default-1000px, 768px and 360px). The default breakpoint has extra space at the bottom when scrolling all the way down. This doesn't show in the 768 and 360px breakpoints. I found out that the hidden elements' positions in the default breakpoint match those for the lower sized breakpoints. I had to manually unhide, drag those items above the bottom element in the default breakpoint and hide them again to remove the extra space.

I just recently discovered the trick to solve this for elements placed at the right side or horizontal limit of the breakpoint. I selected hidden for overflow-x under Page Properties > Advanced > General. I tried changing the settings for overflow-y but that doesn't address the problem with the extra blank space at the bottom.

Any advise on how to automatically solve this without resorting to the manual method described?

Re: Empty space when scrolling to bottom of pages for desktop/laptop screens but none on mobile screens

Posted: Fri Jul 16, 2021 10:10 am
by Pablo
See this related FAQ "There is a large is empty space at the bottom or right side of my page."
https://wysiwygwebbuilder.com/forum/vie ... 10&t=63817

If you need further assistance, then please share a DEMO project so I can see all your settings.
Related FAQ:
viewtopic.php?f=10&t=82134

Re: Empty space when scrolling to bottom of pages for desktop/laptop screens but none on mobile screens

Posted: Fri Jul 16, 2021 10:57 am
by Makintosh
Thanks Pablo. Looks like there's no way other than what I manually did to get the extra spaces out. Hopefully there will be an automatic solution for this in future versions.

Re: Empty space when scrolling to bottom of pages for desktop/laptop screens but none on mobile screens

Posted: Fri Jul 16, 2021 12:07 pm
by Pablo
Did you try all suggestions?

Re: Empty space when scrolling to bottom of pages for desktop/laptop screens but none on mobile screens

Posted: Sat Jul 17, 2021 8:41 am
by Makintosh
Problem solved!!!

Stopped at the part which confirmed the manual method for removing empty spaces.

Reading on and got to this solved the concern:
UPDATE: WYSIWYG Web Builder 12 now supports a new layout option to control the behavior of hidden objects. Tools->Options->HTML->CSS visibility property.
This option controls the way objects are hidden. When using 'visibility:hidden' hidden objects will not be visible but they still affect the layout (just like in previous versions of WWB).
On the other hand 'display:none' removes the object from the layout so it no longer affects the size of the page.
This can be useful when hiding objects that are not inside the page boundaries in breakpoints. Note however that this may also change the behavior of event and third party code, so test thoroughly before using this option.
Many thanks Pablo!