Phone view doesn't change when turning to Landscape

[alan_sh]

I have a very simple responsive site built with a layout grid. I have 3 views - default, 768 pixels and 320 pixels. When I simulate changing the size using a desktop browser (by shrinking it), the views change just fine. However, if I open the same link on a phone and then turn it to landscape, it remains the same view just in the centre of the screen.

If you want to see it, it's here http://****.gmnscouts.org.uk/wys/index.html - there's only one page.

Any ideas or is this what is supposed to happen?

regards

Alan

[Pablo]

It is very unlikely that your mobile is only 320 pixels wide, so that probably why the breakpoint is not triggered.

[alan_sh]

Pablo, it does do the tiny size in portrait mode - so that size is OK. What it doesn't do is go to a wider format when I turn the phone to landscape mode.

Alan

[Pablo]

This is related to the breakpoints you have added and the viewport of the browser.
If you want to switch to mobile view sooner then you will have to increase the size of the 320 breakpoint or add another breakpoint.

[alan_sh]

OK - let me have a play around with breakpoints But I would have thought 768 was narrow enough for the landscape view (320 is obviously right for portrait as it displays that view correctly).

I'll report back when I've checked it out.

cheers

Alan

[crispy68]

Alan,

What sort of phone are you using to view it on?

[alan_sh]

I cut the 768 one down to 512 - no difference.

is it because the phone is only reporting a single size, no matter what I do? If so, is there any way to check this?

Alan

[alan_sh]

Alan,

What sort of phone are you using to view it on?

It's a OnePlus5 running Android Pie. Screen resolution is something like 1920 x 1080

When I run window-size from rapid-tables, it reports 732 x 332 in landscape mode and 412 x 652 in portrait mode

Alan

[alan_sh]

Update. It works in FireFox for Android. It doesn't work for Chrome for Android.

So, not a WYSIWYG issue at all. Don't you just love google!!!

Alan

[Pablo]

So, not a WYSIWYG issue at all.

Correct, because the browser determines which breakpoints to use.

[rogerl]

try 380 as smallest bp. Also bp of 480 can be useful. I made that mistake when doing my site.

[alan_sh]

Thanks both - I'll experiment and see what I end up with

Alan