Breakpoints not working

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
ChalkyW64
 
 
Posts: 14
Joined: Wed Jul 19, 2017 7:33 pm

Breakpoints not working

Post by ChalkyW64 » Thu Feb 13, 2020 3:10 pm

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?

User avatar
Pablo
 
Posts: 19011
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Breakpoints not working

Post by Pablo » Thu Feb 13, 2020 3:39 pm

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.

ChalkyW64
 
 
Posts: 14
Joined: Wed Jul 19, 2017 7:33 pm

Re: Breakpoints not working

Post by ChalkyW64 » Thu Feb 13, 2020 4:48 pm

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... :(

User avatar
Pablo
 
Posts: 19011
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Breakpoints not working

Post by Pablo » Thu Feb 13, 2020 5:02 pm

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":
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817

Post Reply