Responsive Design Not Working Properly

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
williamz902
 
 
Posts: 6
Joined: Thu Jan 11, 2018 10:25 am

Responsive Design Not Working Properly

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

Re: Responsive Design Not Working Properly

Post 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.
williamz902
 
 
Posts: 6
Joined: Thu Jan 11, 2018 10:25 am

Re: Responsive Design Not Working Properly

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

Re: Responsive Design Not Working Properly

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