Strange RWD problem

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
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Strange RWD problem

Post by alex4orly »

I have a sample page to demonstrate the problem : https://squadron-125.org.il/page1.html

The page is set to 1000px width
on it I have a JQuery Modal Dialog that loads automatically
Inside this dialog, I inserted an [RZ] iFrame, that loads another html page into it

If full screen mode (Windows PC, iPad in Landscape mode) it looks as expected
On Windows, if I reduce the browser width, it goes into the 768px break point, looks OK on both devices

When I further reduce the browser width in Windows, going into 480px bp - the Modal dialog remains wider, but the [RZ] iFrame is reduced in width to what is set in my 480px bp... Therefore, the dialog is no longer centered mid screen as wanted.

It looks also wrong on my Samsung Galaxy S9 / Android in Portrait and in Landscape mode

Any ideas?

Please
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

To be able to help you, I need a demo project so I can see all your settings.
However, I cannot give support on [RZ]'s extension, so you will have to remove this before sharing the project.

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

OK, removed the RZ, just used the standard iFrame to load into it another html page
Created a one page only project : https://squadron-125.org.il/singlepage.wbs

The problems remain, you can see it in both landscape and portrait mode

Thanks in advance
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

I do not see the problem in the project you have shared. For me, the window resize in all breakpoints.
However, I do not have a Samsung Galaxy, so I cannot test in on that device.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

OK, what are you testing on? iPhone/ iPad , Windows?

Please see this document : https://squadron-125.org.il/TestPage1.pdf

Thanks again
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

Is this the same project you have shared?
I do not have that image at the bottom. This image looks like it's wider than the viewport.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Of course you don't - For you I created the 1 page only project but I run that page inside my pictures.

Please do the following:

1) Run the page onto your computer in full screen
2) Start reducing the width, you will get at some point to the 768 bp
3) click on the button under the image - the story about that person opens up, but please note - it opens up in a very narrow view, which is NOT what I set it for 768.
4) If you continue reducing the width, you get to the 480 bp, and click the button story - you will see that same story width as before

Why / how is that?

Ples try that on your mobile phone in portrait mode, at my end the page shows wrong

Looking forward to your feedback

Thank you
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

To be able to be help, I need a demo project which demonstrates the problem.
Then I may see what is wrong based on your settings and try to point you in the right direction .

The project you have shared does not have an issue as far as I can tell.
So, can you please share a projetc that has the problem?
I cannot see what you have done based on the published page.

Note: I did see the problem in your previous example, before you remove the extension etc.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Hello my teacher

Please see these 2 links:

https://squadron-125.org.il/singlepage.wbs
https://squadron-125.org.il/wrongscreen.pdf

The PDF shows two example on my mmobile phone in portrait, the same happens on my iPad
On first entry it looks wrong - the image on the left, after you scroll, it comes the correct way

Hope you can find what am I doing wrong

Thanks again
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

I have published your example here:
https://www.wysiwygwebbuilder.com/suppo ... page1.html

But I do not see the issue on my iPhone or iPhone.

However, note that the inline fame is not a child element of the dialog, it is just on top of it.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Hello, Good morning from Australia

The link you provided is going to NOT FOUND:

Not Found
The requested URL was not found on this server.


I don't understand your comment that the iFrame is not a child of the Dialog, is that the problem I see?

Thank you
pajadt
 
 
Posts: 304
Joined: Sat Mar 16, 2013 11:23 am
Location: Europe
Contact:

Re: Strange RWD problem

Post by pajadt »

Hi Alex
Based on your code all image is give 100% x 100%, only that image is not give, so that is fault, change at image Layout - Full with: true, and problem solves
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Sorry, what image are we talking about?

On the front welcome page, there is no image, just html text and an iFrame

Please tell me

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

The correct link is:
https://www.wysiwygwebbuilder.com/suppo ... page1.html
I don't understand your comment that the iFrame is not a child of the Dialog, is that the problem I see?
This means that the inline frame is not part of the dialog. So, the dialog and inline frame are unrelated.
You can see this in the Object Manager.

I assume you want the inline frame to be inside the dialog, so that when you close the dialog it will hide the frame?
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Hi Pablo,

Well, in the meantime it seems I managed to sort it all out.
Yes, I know that the two are not related, but despite that, when I close the dialog, the iFrame goes with it...

It ssems the problem all along was with the setup of my break points.

If you can do one more thing for me with your apple devices, please visit the site
https://squadron-125.org.il/home2.php You will see that the welcome screen shows now OK (at least on Windows and Android)

Once this is dimissed
1) Click the first blue shape on the top left on landscape and portrait mode on iPad
2) Click the last image before the cat on the right

Then repeat in Portrait

And let me know if all looks OK to you.

In the process, you can learn some Hebrew...

Thanks again
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

It looks OK for me;)
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Thanks so much, now i can get on and construct the site

Cheers
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Hello again,

It seems, I was happy too soon. After playing with the break points, it fixed the Ipad but got the Galaxy wrong again
I have only 2 break points - 480, 768 and it seems that at 480 it loads what belongs in 768.
I numbered the captions from 1 to 3, 1 is the full screen on my Windows desktop

Please see some screen shots
This is the initial visit to the page : https://squadron-125.org.il/home2768.php in desktop mode
Here is the image on my phone : Image
Once I close the "x" it comes to this : Image
Then I move the dialog to the right : Image

The page heading says 3 - 480px, but the dialog loaded says 2 - 768 px

Why?

Here is a single page project that demonstrates the same problem : https://squadron-125.org.il/singlepage.wbs
Or visit : https://squadron-125.org.il/page1.html to see it on a mobile phone
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

Maybe the Galaxy browser is displaying an older version of the page from cache?
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

OK, this was of course my first thought... Didn't help.
So, I tried on my mobile 2 other browsers, seems to be almost OK, but

In my 480 px breakpoint on Firefox on my mobile I get this : Image
My setup at this point is Image

But the dialog still comes up wider than the screen itself, is my setup for the dialog wrong?

What can I do about it?

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

I do not see any issues of my devices (PC, iPad, iPhone).
Maybe there is something wrong with your device?
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

The problem only shows up on Android when I introduce the 768 bp. WE have 4 different Android devices 2 mobiles and 2 tablets of different models.

It works fine on a neighbour's old iPad

If I avoid the 768 bp, then, on the Android and Apple tablets, the welcome screen comes too small - the setup of the 480 bp.

Does my dialog setup look OK to you? IT shows wider than the actual device screen and the visitor needs to scroll sideways to read the text inside the dialog. The content is a html page that at the 480 bp is set to 400 px with of the Layoutgrid and the iFranme it loads into is wider

Any suggestions?

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

The dialog setup looks correct.

Maybe the android devices have a different viewport size, so you will need to add an extra breakpoint?
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Yes, I thought about , at what point?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

I do not know which screensize your device has, so you will have to look this up yourself.
But I guess it's somewhere between 768 and 480
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

This is something I am confused about
When I check the resolution on my phone, it shows 1080 x 2220

So, what is actually, bp 480 or 768

Thanks
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

Very good, but
1. How can I detect in JavaScript?
2. Is there a ratio between resolution and viewpoint? If so, what is it?
Thanks again
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

Is there a ratio between resolution and viewpoint? If so, what is it?
This depends on the device.

You can use the website to determine the viewport. Based on that you can an extra breakpoint,.
Or just try something between 480 and 768 and see if that works.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

OK, On my mobile phone - the Viewport is 360 x 612
I added a bk at 320, set the dialog width at 320 but now, when the page loads, it loads as if I am holding the phone in Landscape mode.

When I turn the phone around and back - it repositions the dialog into portrait mode

I tried changing the dialog from JQuery to Bootstarp, it loads it immediatly in portrait view

With this issue of ViewPort, it seems it will be more practical to be able to load pages based on ViewPort sizes and not set any breakpoints at all, or am I wrong? Is that at all possible?

Thanks again
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

The viewport size is the breakpoint width.

Note that you can also set the size of the dialog to full width. Then you do not have to worry about the size for smaller screens.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

OK, I don't see a setup parameter in the JQuery to set the size to 100%

Where?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

If the breakpoint is specified in the RWD properties) and the browser's viewport gets smaller than the specified value, the dialog will switch to full width mode.

Note:
Set the 'position childeren' property to floating, otherwise the content of the dialog will not be flexible.
User avatar
alex4orly
 
 
Posts: 632
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Re: Strange RWD problem

Post by alex4orly »

But the Dialog is initially hidden and only open on a button click

So?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Strange RWD problem

Post by Pablo »

This does not matter.
Post Reply