Mobile and Deskop View issues plus other niggles

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Mobile and Deskop View issues plus other niggles

Post by Starb7 » Mon Nov 12, 2018 3:38 pm

Hi All

I have created (from a template, Flowers) a new site here: http://www.bloomroombolsover.co.uk/newsite/ and have a couple of issues I can't pin down. I chose this template as it; a) has some parallax and b) appeared to work well on desktop and mobile devices with only having the one 'view' in the editor, ie no breakpoints, etc.

Here's this issues:

1. On a desktop, it looks fine - just how I want it
2. If you view it on a mobile, the parallax picture is cropped by about a 3rd of the width
3. On mobile parallax effect is not working
4. Images seem to be left justified and cropped off
5. On mobile, there is no text showing as you scroll down (over the green petals)
6. The Facebook, logo and Instagram icons overlap and squash up however I have it set (as I understand) to Hide Overflow

In general, viewing on a mobile is a bu66er!

Any pointers would be welcome. Note that if I upload the template 'as is' no edits, etc, it looks OK so not sure what I have done to break it!

TIA

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Mon Nov 12, 2018 4:33 pm

There is a scrollbar at the bottom of the page, this indicates that the content is wider than the viewport.

For example, Image2 has a fixed width so it will not adjust to the available space automatically.

Parallax does not work in some mobile browsers (safari/ios), this is a know limitation of these browsers.

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Mon Nov 12, 2018 4:59 pm

Hi Pablo

Thanks for the reply... stull puzzled though!

I used your Template 'Flowers' and only changed the content and there's no items that overlap the current width. I have started a new site based on the template and when I check, I see that some of the Layout Grips are set to have a max width of 1140 where the page is only 970 yet this base template looks OK on mobile.

What could I have changed to make this 'appear' wider than the viewport?

Image2 (seen in the lower portion of the site) is in a 3 section layout cell so can't see how it can be bigger than the viewport, at least what would cause the overlap. I had also set this Cell to Overflow: Hidden so would that just not hide it as the page width got smaller?

Also, why is the text missing on mobile, is that a Parallax issue too?

TIA

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Mon Nov 12, 2018 5:58 pm

You have inserted fixed width images, so eventually they will cause a scrollbar. Fixed images do not resize automatically.
If you really want to use fixed size images in a flexible layouts then you will need to ad breakpoints to make the images smaller for smaller screens.

The behavior of parallax (fixed+cover) is not defined so it may also affect the text.
If you add a breakpoints then you can configure a different background mode for smaller screens.
There is also a dedicated option for this in the page properties -> Advanced -> Use safari mobile fix.

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Mon Nov 12, 2018 7:00 pm

Hi Pablo

Image 2 now set to Full Width=True which seems sort of backwards, ie it implies always at 'Full Width' and not scaleable (lesson learned) but I can't see how to make this the same for the 'F' and the 'Instagram' Font Awsome object, perhaps not possible?

Creating breakpoints always seems a nightmware as some items work and others don't making any future editing tiresome as yoi have to hide/show object that fit or won't... or am I missing something?

The 'Use Safari mobile background fix' is enabled! :/

In the page properties there are a lot of events, some probably obsolete as I have removed sections from the template. Would any 'events' be deleted as the sections are removed or is that a manual thing and if an object were 'missing' would a failed event break th epage?

Still can't see the text and spend ages trying to find out why...

Thanks for you help as always!

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Mon Nov 12, 2018 7:20 pm

ie it implies always at 'Full Width' and not scaleable (lesson learned)
"Full width" means 100% of the object's' container.
or am I missing something?
I think it will be useful to read all the available documentation: Help, Tutorials, FAQ etc.
Would any 'events' be deleted as the sections are removed or is that a manual thing and if an object were 'missing' would a failed event break th epage?
The software will not automatically remove events, you will have to do that yourself.
Still can't see the text and spend ages trying to find out why...
Which exactly text are you referring to?

Also try to focus on one thing at a time, other it will become very confusing (for me).

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Tue Nov 13, 2018 10:11 am

LOl, the text you can't see on a mobile :) Seriously though... I have edited the site and removed all the event so basically a simple site. Didn't see the point of having fading text if it doesn't work on Android mobile devices :( . The text is the 'We at the Bloom Room' and it's header, this show OK on desktop IE11, etc, but not a mobile (does now I have taken the fade events off).

I'll have to live with the event issue so now just have one last one, how do I scale the 'F' and the 'Instagram' icons as they are FontAwesome objects. Presumably, you cant?

Many thanks for your help and patience as always!

Cheers

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Tue Nov 13, 2018 10:20 am

You can resize the font awesome icons just like any other object, with the resize handles.

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Tue Nov 13, 2018 1:29 pm

Sorry, I wasn't clear, how do you resize or better to say, scale them 'actively' when viewed on mobile, it responsive scaling. Cheers

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Tue Nov 13, 2018 2:21 pm

You can set different sizes for different views by adding breakpoints.

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Tue Nov 13, 2018 4:07 pm

… and that's the issue I didn't want to edit 'different views' (see above) just have one view where the objects scale (as 99% of it does now). As you can see in the lower panel, there is the 'F', a logo and then the Instagram logo (F and Logo are FontAwesome objects) and I have set the middle image to Scale and that works fine when the page width is changed and its scaling that I wanted with the F and Insta logo but presumably, as they are not images, you can't do this?

As I understand it, to use 'Responsive Scaling' I need to add a Breakpoint and then edit it in that breakpoint. The problem with that is items in the normal view get altered and more importantly, my 3 col Layout Grid gets changes to vertical instead of Horizontal. I have read (and re-read) the guide but getting nowhere fast! How do I stop it changing the structure of the grid from 3 across to 3 down and keep the object within each cell scaled to fit?

Finally, I am using the Built-In help pages and wonder is this is up to date with the online help? Should I really refer to the online stuff only?

Thanks once again.

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Tue Nov 13, 2018 4:17 pm

Font Awesome is text (icon font), not an image. It cannot dynamically resize based on its container.
As I understand it, to use 'Responsive Scaling' I need to add a Breakpoint and then edit it in that breakpoint.
Correct, but only for 'fixed' sized objects, so if all you want to do is resize an object then you do not have to adjust the rest of the layout.
Finally, I am using the Built-In help pages and wonder is this is up to date with the online help?
Yes, as far as I know. I am updating it regularly.
Should I really refer to the online stuff only?
I recommend to read everything.

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Tue Nov 13, 2018 4:45 pm

"Correct, but only for 'fixed' sized objects, so if all you want to do is resize an object then you do not have to adjust the rest of the layout." - but the issue is the Layout Grid changes in the smaller breakpoint to 3 cells deep so how do I stop it doing that? I want 3 cols wide, not down. I take note re the FontAwsome (I did ask much earlier about this but you have only just confirmed) and so will change these to standard images.

I have read the Help stuff online and off, honest, but there's so much of it and whatever I do, it doesn't seem to match what the help says, eg. You mentioned earlier that Parallax text doesn't work on mobile devices but what really bakes my noodle is that I have uploaded the 'Flowers' template 'as-is' and that DOES work. I have checked the grid and object, Page properties (Events), there are no layers and no breakpoint set and so they are like-for-like yet do not work on my page and I can't see why - this is all very frustrating.

TIA

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

Re: Mobile and Deskop View issues plus other niggles

Post by Pablo » Tue Nov 13, 2018 6:19 pm

but the issue is the Layout Grid changes in the smaller breakpoint to 3 cells deep so how do I stop it doing that?
You can configure different grid columns in breakpoints, for example by setting overflow to 'hidden'
Or if you also want the same column the set a very small breakpoint value in the grid.

User avatar
Starb7
 
 
Posts: 103
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Mobile and Deskop View issues plus other niggles

Post by Starb7 » Tue Nov 13, 2018 9:01 pm

...any thoughts on the text issue? Tia

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests