Device compatilbilty driving me mad!

[Kash2001]

Can someone please assist with this issue that I am finding taxing with Wysiwyg 18.

So I've laid out the website on my 15" screen and overall is now displays as it should. We I look at it on a mobile phone 6.5" the page is hard to the left and layout grids are all over the place.

I've looked at page breakpoints, but there are many screen sizes to adjust too and I have to rearrange each page according to the resolution to fit the info on the, screen which is a problem.

My wifes using wordpress and although its not intuitive, it automatically reduces and sorts frames and text and looks great on a 17" screen and a mobile phone, without having to juggle different screen resolution pages.

Isn't there any easy way to allow the page to reduce in size to fit as it should look and then viewers can just zoom in to view the particular area of interest.

Other websites seem to be viewable on different screen sizes, but mine gets in a mess with a reduction of screen size.

Please help me as the site is pretty much there in a laptop form, but I dont want to play around for hours adjusting for every possible screen size, making information inaccessible.

Many thanks.

[Pablo]

Normally, when you use layout grids then the layout will adjust automatically.
If that does not work for you then there is most likely a conflict in your settings.
For example, you may have used a fixed size object.

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[Kash2001]

Hi Pablo

Many thanks for the quick reply, the site is mainly layout grids, text frames and headings, I've a master page which is a title and floating menu which scrolls over the website when scrolling.

I've tried to keep it simple, but all text and images are hard left when I access in mobile format. The menu header doesn't fit to the page and the menu bar doesnt scroll down even though it does on a laptop screen.

I've uploaded a temporary site to the following link http://www.zkstaijutsu.x10.mx/index.html - I've just included the index page and ccs folder for this and the master page (master-page-1) I had to include images folder in the upload to show the layout and web idea. Hopefully not to complicated to look into.

Ive removed the javascript for detecting mobile site as this refers to a separate page which would need altering massively in each resolution, hence my question here.

The business hosting site is as follows... www.bioxint.com if this helps in viewing on this server.

Any assistance is very welcome. I've used this package for most of the website building, but its been a while since I've used it a good couple of years, so apologies in advance for any fundamental issues made...

If you need further details just shout.

Many thanks.

[BaconFries]

When it is asked to provide a "Demo" it is ment you provide a "Copy" of your project the .wbs file and not a url to your site. This is so that your project can be opened in the software and all the settings can be viewed as this is not possible just looking at a url or its source code. Please read the following carefully on this.
viewtopic.php?f=10&t=82134
Also the following is not secure and throws a 404 so can't be reached.
http://www.zkstaijutsu.x10.mx/index.html

[Kash2001]

Apologies my bad, Ive uploaded to google drive with open share, link below hopefully its accessible and Ive removed everything but the index page, contact form and master page. Hopefully all is ok.

https://docs.google.com/document/d/1CA8 ... ue&sd=true

Please let me know if you need anything further and thank you for your assistance.

[Pablo]

Your project have several issues:
- the page alignment should not be set the 'center in browser'. See also Page -> Error Reports
- the index has two content place holder objects. This is incorrect and these objects should be removed.
- there are several objects outside the page boundaries. For example: Bookmark1, Text1, Image1, Image6 and Image9. These objects affect the page size.
- Also, InlineFrame1 seems to have been place randomly on the page...
- when using layout grid, then all content should be flexible. In most case, this means that the 'full width' property of objects should be set to 'true', otherwise the object will have a fixed width.
for example 'welcomeHeading1'

There may be other issues, but there is too much content in this project to go through all the settings. That may take me several hours of work.

[Kash2001]

Hi Pablo

Many thanks for the input, I've removed the images, although I couldn't see them in the WWB18 page so I'm not sure what they actually were? The centring in page I though kept everything in the middle ie. frames, grids, etc. but if not so, I've removed this now from the site and doesn't seem to make a difference in layout.

InlineFrame1 I didnt realise should be in a layout grid. I thought a frame could site in the page full width, but I'll move it to a layout grid if its making the page display incorrectly.

Ok so layout grid should be set to fluid not fixed width i'll alter this, which hopefully will sort some layout issues at difference resolutions and screen size, now adjusted.

Thank you for your help, I'll see what happens with these adjustments and hopefully I can keep using WWB18 for the layout.

[Kash2001]

Just uploaded but the following issues have appeared...

"InlineFrame1 I didnt realise should be in a layout grid. I thought a frame could site in the page full width, but I'll move it to a layout grid if its making the page display incorrectly." I've put this in the layout grid, but the inline frame isnt showing now? Can it go in a standard layer?

OK Ive adjusted all that you've advised but its a mess unfortunately. I've 2 choices, ask the wifes help on wordpress and start again and throw away hours of work in this project or look to some other package. I dont know why its such an issue, in the preview it always looks great on the laptop, but when uploaded its just a jumble on anything but a laptop.

I accept It's probably me thats not done something correctly, but I never had this issue with my 1st site on WWB 14, although it was almost too small to view, but everything was in place, I'm at a loss. Does the newer package integrate the cross over of platforms better when moving from phone to laptop etc?

Thanks for the help, but I'm not sure where to go with this.

[Pablo]

When using layout grids, then you cannot just place objects randomly on the page. The page needs a structure to be flexible / responsive.
If you place an object randomly on the page then it will have a fixed/absolute posting and this will break the flexible layout.
This has always been this way and has nothing to do with WWB18 or WWB in general. If you make the same mistake in WordPress or any other web design tool then you will have the same problem.

If you need further assistance then please share the update project and describe exactly where to look to see this issue.

[Kash2001]

Hi Pablo,

All I have on the page is the header linking to a master page that is layout grid marked as header, setting is default and fluid and a floating menu.

All the index page has now is Layer grids, and a text box in a layer grid, all images are now in a layer grid, I'm not just randomly putting text and pictures on the page without them being in a layer or grid box. But there's something awry. I may just give it one last go, with a new site in case of corrupt data.

As said on the page it looks great with a laptop, but on mobile its a mess.

I'll forward the link over the weekend with the latest updates, and hopefully we can sort it as other than the screen res issue I love this software.

I'm off working now, so I'll be back on Monday.

Many thanks.

[Pablo]

All the index page has now is Layer grids, and a text box in a layer grid, all images are now in a layer grid, I'm not just randomly putting text and pictures on the page without them being in a layer or grid box.

In the project you have shared there were many 'randomly place objects'. These object breaks the layout. Also when you do the same the same at in WordPress or any other tool,. It just is not correct.

If you remove all these objects, then everything should work as expected.

If not, then please share the updated project and describe exactly where to look to see this issue.

[bkjohns]

You have to be sure that objects are actually in the layout grid. You can place a new text object, for example, in what looks to be inside the grid, but you usually have to grab the object and move it into the grid which will cause the grid borders to change color (on my system it is blue) and then the object is actually in the grid. It fools me every now and then when I forget to do this. Not saying you aren't doing it correctly but it is an issue at times.

[Kash2001]

Hi all thank you for the input, apologies for not replying of recent. I've found a balance between laptop and phone at a width of 766 which works for both so it seems. Found a few errors on some of the pages ie.. an image that wasnt display on the website but was in the object manager and not show in the layout. It seems nearly everything needs to be in grid layouts and the same width of the page. I centred mine pages horizontally in page settings which seemed to work best.

Although I still have one major issue regarding navigation, I have a floating left side menu in the header page, which then displays on all webpages when loaded. But the menu goes in and out behind certain items, like pics etc. I've asked the menu to be in front and the content holder in front. But on the pages the menu decides to go behind certain items when scrolling down the page.

Any help is much appreciated, then I can celebrate that its done for a few years.

ATB

[Pablo]

If you need further assistance then please share the modified project.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[Kash2001]

Hi Pablo

I have below the link to the WWB file

https://drive.google.com/file/d/1sT9Adz ... sp=sharing

Files related to the above file in case needed...

https://drive.google.com/drive/folders/ ... sp=sharing

The menu in page master-page-1 has the title and menu, the title goes over the top of the other pages as expected, but the menu goes in and out of pictures and layout grids. Its not consistent in terms of some pictures and not others etc.

Any help with this is gratefully received as it will help enormously with mobile pages...

Many thanks

[Pablo]

Can you please describe what I need to do to see the problem?
There are so many pages that I have no idea where to start looking...

[Kash2001]

Hi Pablo,

Thanks for the reply, although there is only 4 html pages, the main ones are index and master-page-1. The other two html pages are links to the index page, ie contact etc.

As per my reply earlier the menu appears behind of some of the index page and in front of other parts, it should be in front of it all, so visitors can access the menu anywhere in the site.

It scrolls fine but is hidden behind some of the index html layout.

I hope that helps.

Thanks

[Pablo]

The project you have shared has 15 pages. When you share a project then can you please remove everything that is not relevant to your questions? That will save me a lot of time and you will get a solution more quickly.

When using a master page, then the content of that master page will be in the background, otherwise you would not see the other content.

To make sure the menu is always on top, set the z-index via 'Custom style' of the layer.

Code: Select all

z-index: 9999 !important

[Kash2001]

Hi Pablo,

Thanks for the detail, I must have uploaded the wrong file, as I had stripped it out. However the link below is now just the index and master with supporting files. Most stuff is fixed and workable as is, apart from the menu icon issue. Hopefully this will help, I've checked z index and its ticked, but as said the menu floats under and over images/text, when scrolling down, which is difficult to navigate on a mobile.

https://drive.google.com/file/d/1sT9Adz ... sp=sharing

Here are the supporting files ie. pics etc. if they are of help...

https://drive.google.com/drive/folders/ ... sp=sharing

Hopefully, if I can get this fixed that would be great.

Thanks.

[Pablo]

I have downloaded the file again, but there are still 15 pages and hundreds of objects.

Anyway, it does not look like you have implemented my suggestion.

Step 1
Open 'master-page-1'

Step 2
Right click 'Layer1'

Step 3
Select 'Object HTML'

Step 4
Select 'Custom style'

Step 5
Add code:

Code: Select all

z-index: 9999 !important

[Kash2001]

Hi Pablo

Thanks but I just dont get the website upload issue, I checked it and there's only 4 html pages, as the google link pic below shows?

https://drive.google.com/file/d/13yTHNJ ... sp=sharing

But thank you for your clearer explanation of the z index tick. I had assumed it was in the properties section. Anyway having pasted your html code into both the layer and menu asset, it now works fine. Although I don't understand why your download was 15 pages???

Thank you for the input and help. It would have set me back weeks trying to we format in another package and is now good enough for a while to use. Loads to learn on this stuff and a nightmare for the less experienced but I've got there for the moment.

Many thanks for the time.

ATB