Page 1 of 1

Responsive Design Not Working Properly

Posted: Sat Jan 18, 2020 11:43 am
by williamz902
Hey Guys, I need some help:

In past versions of Web Builder, responsive design has always worked really well for me. In Web Builder 15, however, it's a mess! Probably because of the new options to "Activate when smaller than device width and Activate when larger than device width" options.

Here is my setup:
Default View is set to a width of 1024px
I have a second breakpoint for mobile set to 320px
I have set "Activate when device width is larger"

My laptop with a screen resolution of 1920x1080 is displaying the mobile version of the website - and it's a mess.
My Samsung S8 phone is displaying the mobile version correctly.

Website can be found here: www.archipelago-resort.com (All the other pages in the site have not yet been optimized for mobile, so they show properly on computer)

How do I get laptops, desktops and netbooks to display the default view correctly? Somehow in previous versions it just worked. I'm using quite a few layers - and I understand that layers don't display correctly in mobile view until you create a copy and hide the objects from the default view. I've done all that.

Re: Responsive Design Not Working Properly

Posted: Sat Jan 18, 2020 12:28 pm
by Pablo
I cannot see what you have done based on HTML code, but it looks like you have placed a slideshow on a full width layer.
This is not correct because the rest of the layout is not flexible, so this will cause overlaps.
Note that this is unrelated to version 15, it's just not the right way to do it.
If you want to create flexible/full width layouts then use layout grids instead.

Related tutorial:
http://wysiwygwebbuilder.com/layout_modes.html

If you need further assistance then I need a copy of your project file, so I can see what you have done.

Re: Responsive Design Not Working Properly

Posted: Sat Jan 18, 2020 12:59 pm
by williamz902
I'm trying layout grids instead, but hate them, because I can't resize them manually, and objects inside cannot be re positioned where I want them? Am I missing a setting?

Re: Responsive Design Not Working Properly

Posted: Sat Jan 18, 2020 1:07 pm
by Pablo
I can't resize them manually,
Correct, because the size is determined by the available space. That is the whole point of flexible design.
objects inside cannot be re positioned where I want them?
Objects in a layout grid are floating so the position depends on the grid settings and order of the elements.

The problem with your layout is that you have parts flexible and parts fixed. That will cause a conflict.
A flexible object (like your slideshow) will dynamically adapts it's size but the rest of the layout doesn't because it has a fixed size/position.

Related tutorial:
http://wysiwygwebbuilder.com/layout_modes.html