Layout too large on iPhone and Android when using multiple layouts

Responsive Responsive Layouts
1

I have two versions of the same project. Project 1 has a single portrait: layout (768px * 946px). When I open the project’s HTML file on my devices (iPhone, Android, iPad, Desktop Safari) the contents resize perfectly for each size of screen.

Project two contains two layout: the same single portrait layout (768px * 946px) as project 1 and landscape layout set as iPad landscape. Now when I open this project’s HTML file on my devices (iPhone, Android, iPad, Desktop Safari) the portrait page is now too wide and the contents now spill over the right border and bottom border (it is using the correct layout of items, i.e. the portrait layout) . I can pinch-zoom the page and the content size to correctly fit the screen but if I navigate to the next screen it is too large as well.

Question: why does adding a second layout to my project impact the way the first layout is displayed?

2

settings¿ bug¿ wait i’ll have a look in my crystal ball :wink:
but really -> you should provide an example :slight_smile: to be precise

1 Like
3

Here is the portrait version of my home screen when I only have one layout in the design:

Home page renders in the same way on all my devices when I view it in portrait mode. If I take the same project and add a new layout to support landscape mode, but do not make any other changes, then the home page looks like this:

Now I have scroll down and right to view the home page. I don’t understand why the portrait page suddenly becomes supersized just because I have added a landscape layout. Any ideas gratefully received.

4

What are your breakpoints?
Can you provide the file? Can you provide a link?

5

I am very new to the whole idea of having different layouts for portrait and landscape rotations. The issue for me seems to be setting the breakpoint for portrait vs. landscape rotations. This seems to be driven by the units screen size so that designing a landscape layout based on an iPad’s screen resolution does not allow that layout to be triggered when viewing the page on an iPhone or android smartphone. Seems as if the breakpoint needs to take into account the scaling factor of the device being used.

I think I need to spend some more time thinking about this whole area and how to manage my layouts when switching between portrait and landscape rotations. There are so many settings that affect page layout and component positions.