Page 1 of 1

Breakpoints not working

Posted: Thu Feb 13, 2020 3:10 pm
by ChalkyW64
The breakpoints in this do not to work when the browser window is resized:

Zipped WYSIWYG Project

Can anyone please tell me what I have done wrong?

Re: Breakpoints not working

Posted: Thu Feb 13, 2020 3:39 pm
by Pablo
The main issue is that you have duplicated all objects. This makes it very difficult to maintain the layout and many of your object are outside the viewport which activates the scrollbar.
There is no need no duplicate all objects. You can reuse most objects in breakpoints.

For example, there should only be one header and the child objects of that header can be rearranged in breakpoints.

Re: Breakpoints not working

Posted: Thu Feb 13, 2020 4:48 pm
by ChalkyW64
Thank you Pablo.

I have removed the duplicates objects leaving me with 1 header and 1 footer:

Updated Project File

I have toggled them (or objects contained within them) on/off within each breakpoint via the Object Manager, but everything (navigation/images etc.) still appears no matter what the width of the browser window. One thing I don't understand is why the horizontal scrollbar appears in the smaller widths even though the page width for each breakpoint is (I think) set correctly?

I'm sorry Pablo - I am clearly doing something stupid - I just cannot for the life of me work out what it is... :(

Re: Breakpoints not working

Posted: Thu Feb 13, 2020 5:02 pm
by Pablo
This is way better :)

Now the only duplicated object is the CSS menu.
If you unhide CssMenu1 in the breakpoints then you will see that it's outside the viewport boundaries and that is what is causing the issue.

I suggest to set the button size of the menu to 'stretch' so you can resize the CSS menu to make it fit in breakpoints.

Related FAQ "There is a large is empty space at the bottom or right side of my page": ... 10&t=63817