Web site on iOS

[alex4orly]

I have my village website here : http://www.beleuramyhome.org.au
It is designed as a RWD, with a Master frame, header and footer and all pages are based on Layout grids.
On a Windows machine or on Android Tablet or Mobile phone, it all looks fine
On an Apple iOS - it doesn't.

The top header and footer are Shorter in width then the rest of the frame

Any suggestions?

Merry Christmas

[Pablo]

I think you will need to add more breakpoints. 480 is probably too small for iOS.
The header has a fixed width so it will be too wide for some viewports.

Note that I cannot exactly see what you have done based on the HTML only.

[alex4orly]

The header has a fixed width because I inserted an image with a fixed width to force it to match the master frame width.

I have in the meantime replaced the header object with a layout grid, with a colour background and the responsive menu is inserted into it.
BUT - the header is no longer fixed... If a visitor scrolls the screen, the top "Header" grid goes up...
Is there any way I can fix that top layout grid to be ON TOP and stay there?
Maybe something with the Z order? How?

Happy new year

[alex4orly]

I found in another post here the following:

- select 'Object HTML'
- select 'Custom style'
- Add: z-index: 8888;

But - it doesn't keep the top layout grid in place

Any other trick?

[Pablo]

You can make the layout grid 'fixed' by setting 'Position' property to 'fixed'

[alex4orly]

Hello again,

Followed the instruction, set Position to Fixed. It works, BUT

Tried to have the top layout grid "Horizontal" set to Centre, but it keeps staying to the left
Please have a look here : http://www.beleuramyhome.org.au/page6.html

Just to remind :

Master frame,
one layout grid at the top with the menu and text
Missle place holder
Bottom another layout grid with picture and text

[Pablo]

Max-width of the layout gird is set to '900' so it will not get wider than 900 pixels. All In HTML all floating objects are aligned to the left, there is no 'center' floating.

[alex4orly]

I want the whole site to be only 900 wide

I want the top layout grid to be also 900 - and FIXED, so that if the visitor scrolls the screen, the menu (as part of that top grid) stays visible
I set the Position as "Fixed" as you suggested

So, what I want is NOT possible?

[Pablo]

I think you can implement this by placing another grid inside the fixed grid.
The outer grid will be fixed and 100%, with one centered column, the inner grid set to max-width 900

[alex4orly]

I don't understand why, but that did the trick...
BTW - the heading of the topic is what I started with - the problem is on ALL OS not Apple only
Can you please tell me, why does it work that way?
I want to understand, for the future, not just do it becasue you said so...

Thanks for your help

[Pablo]

I think the issues is related to the width of the page.
If the layout breaks and you did not inclement the correct breakpoints then it may not look good.

Tip: start at the basis. Try not to do too much at once. First create a basic layout and try to make that work.
Note only will be easier to find out where it goes wrong but it also make it easier for me to help you. If you post your problem with a finished layout then it is also difficult for me to see where it went wrong.

[alex4orly]

Thanks Pablo
But i ask, why what you sugested works?
What is the logic here?

[Pablo]

Do you mean the nested grids:

The outer grid is used for the full width fixed, the inner grid sets the max width. It you set the max width on the outer grid then it will; not be full width.

[alex4orly]

OK, now I get it and I can see some other cases when that can be used

May 2018 bring you much joy

Alex