Web site on iOS

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: 547
Joined: Mon Jan 20, 2014 8:17 am
Location: Australia
Contact:

Web site on iOS

Post by alex4orly » Sun Dec 24, 2017 2:04 am

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

User avatar
Pablo
 
Posts: 13900
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web site on iOS

Post by Pablo » Sun Dec 24, 2017 8:09 am

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.

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

Re: Web site on iOS

Post by alex4orly » Tue Dec 26, 2017 9:42 pm

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

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

Re: Web site on iOS

Post by alex4orly » Tue Dec 26, 2017 10:03 pm

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?

User avatar
Pablo
 
Posts: 13900
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web site on iOS

Post by Pablo » Wed Dec 27, 2017 8:05 am

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

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

Re: Web site on iOS

Post by alex4orly » Wed Dec 27, 2017 8:21 pm

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

User avatar
Pablo
 
Posts: 13900
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web site on iOS

Post by Pablo » Thu Dec 28, 2017 8:19 am

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.

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

Re: Web site on iOS

Post by alex4orly » Thu Dec 28, 2017 8:26 am

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?

User avatar
Pablo
 
Posts: 13900
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web site on iOS

Post by Pablo » Thu Dec 28, 2017 8:47 am

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

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

Re: Web site on iOS

Post by alex4orly » Thu Dec 28, 2017 8:58 am

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

User avatar
Pablo
 
Posts: 13900
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web site on iOS

Post by Pablo » Thu Dec 28, 2017 9:06 am

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.

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

Re: Web site on iOS

Post by alex4orly » Thu Dec 28, 2017 10:23 am

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

User avatar
Pablo
 
Posts: 13900
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Web site on iOS

Post by Pablo » Thu Dec 28, 2017 10:45 am

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.

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

Re: Web site on iOS

Post by alex4orly » Thu Dec 28, 2017 11:14 am

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

May 2018 bring you much joy

Alex

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests