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

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Makintosh
 
 
Posts: 12
Joined: Sat Nov 28, 2020 7:16 am

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

Post 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?
User avatar
Pablo
 
Posts: 22428
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post 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
Makintosh
 
 
Posts: 12
Joined: Sat Nov 28, 2020 7:16 am

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

Post 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.
User avatar
Pablo
 
Posts: 22428
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post by Pablo »

Did you try all suggestions?
Makintosh
 
 
Posts: 12
Joined: Sat Nov 28, 2020 7:16 am

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

Post 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!
Post Reply