It’s important to remember that even when you have hidden objects on your responsive page, they are actually still there from a coding perspective…they are just hidden. So it’s possible (and often necessary) to move those hidden objects into positions where they will not cause the pages they are hidden on any trouble.
In other words, a hidden object that is on a 320 variation page that is in a position beyond 320, will cause the page to be wider than 320 when viewed in a browser. The answer is to first make that object visible (temporarily), then move it inside of the 320 area …then HIDE it again. Remember, this will not affect it’s position on the variation it is supposed to be visible on.
This is why the OBJECT MANAGER is so important when designing responsive pages. Because this is where you can HIDE or make VISIBLE any object on a page.
The same principle applies when you have a lot of unwanted white space at the bottom of a particular responsive page variation.
So, if you have placed objects on a breakpoint which are hidden on the default view, then these objects will still affect the default page size.
Just make sure that all objects (even if they are hidden) are within the page boundaries.
- Let’s say your default page is 1200 wide x 800 hi
- The mobile breakpoint is 320 wide x 1200 hi
- The mobile breakpoint has an object at position 0, 1000. The object is hidden on the default view, but it has the same position as on the breakpoint.
This means that height of the default view is now 1000 + object height.
- Go to the default view
- make the hidden object (temporarily) visible.
- move the object up to be inside the page boundaries (1200 x 800).
- hide the object again.
Remember that you can make hidden objects visible in the Object Manager (and vice versa).
In 90 Second Website Builder 10.3.3 and newer you can make hidden objects visible with the option ‘Render hidden objects’, this makes it easier to troubleshoot layout problems.
Spread the Word...