Mobile Devices and breakpoints

[Starb7]

Hi All

I have had a good read of the breakpoints but still struggling to get this working. My understanding is that I can use a breakpoint to show a different object, text sizes, all sorts of things, but I can't get it to work.

I have a page with a Breakpoint set at 320 (for mobile - as recommended in the desktop Help pages). When in standard view, I have a Grid Layout that shows a Contact Form. When viewed on a mobile, portrait, I want to show a message telling the user to Rotate their device. I presumed I could create two pages, one with the normal form and one with the message. When viewing at 320px show the message and when at anything else, show the form. Could I do this by hiding one and showing the other in events?

At what point does the mobile browser (Chrome on Android) see the viewport as 320px? If I rotate the device, does that not become greater than 320? Also, why does the desktop version show the 320 version

TIA

[Pablo]

Not many modern devices have a viewport of 320 pixels.
Most are wider: 480, 768 or larger.

You do not need events to hide objects in breakpoint, you can show/hide elements via the Object Manager.

Note: without your project there is no much I can do to help.
The software has thousands of options and millions of combinations. There is no way for me to know which ones you have selected unless you share the project.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

[Starb7]

Hi Pablo

Sorry, it's this one http://xxxx/preview/index.html

I have the show/hide bit working as you have stated but my issue is that I only want to show the 'rotate' bit when view on a mobile phone. At the moment, this happens on desktop, table 10" but annoyingly, won't show the correct form on a mobile (5") when rotated.

I suppose there has to be a point at where the page detects the device/browser and show the appropriate content - but how?

TIA

[Pablo]

I only see the text when the viewport is smaller than 1023
So, it works correct based on your current settings.

[Starb7]

Ah, but I don't want that! I have (I think?) set the viewport to 320px and only when it is smaller than that, do I want to see the rotate text. What am I missing? Cheers

[Pablo]

Please read: When do I use 'Include min-width in CSS3 media queries'
viewtopic.php?f=10&t=63817

[Starb7]

Hi Pablo, pretty sure I had and have just done again but that's not helped, just confused matters.

The Desktop Help says:

Maximum Width

Specifies the maximum width of the layout grid's content in the browser window. This can be useful to prevent items from being stretched to wide. If the browser window is wider than the specified width then the grid content will be centered.

The link you gave me says:
What is 'max-width'?
max-width specifies the maximum width of the rendering surface of the output device (such as the width of the browser window).
Web Builder uses the max-width in CSS3 media queries to control the size, position and visibility of objects.
For example if you add a breakpoint and set the max-width to 320px then this layout will be used if the browser window is less than or equal to 320 pixels. NOTE: it actually states 'max-width' but I can't find that 'option' just 'Maximum width:' - are they the same? In which case, which is right?

All I wanted was if the form is on a desktop or tablet, say 6" plus it shows the form, anything less, it shows the text. Ideally, I would like to see the form but for whatever reason, despite me checking the page, when on mobile, the right side of the form is cropped. You said this was due to the divline element being fixed yet is it not. What's going on?

Cheers

[Pablo]

Maximum Width
Specifies the maximum width of the layout grid's content in the browser window. This can be useful to prevent items from being stretched to wide. If the browser window is wider than the specified width then the grid content will be centered.............

This is unrelated.

Please read:
When do I use 'Include min-width in CSS3 media queries'

This determines when the breakpoint becomes active.

[Starb7]

Hi Pablo, thank you for your patience. I am really struggling with this (as you can tell) as some very odd things are happening.

I have the desktop version working how I want now, 10" tablet is OK. Mobile, is OK but... if I view Portrait I get the text, if I view landscape, I get the form - this is what I want but, the form is cropped off on the right.

Dimensions: The form is 409,350, the iFrame is drops into is 602, 423 so should easily fit in it and in fact, it does on Desktop and tablet, but not on mobile (~5" or less screen) so why is it getting chopped off when there appears to be lots of space available?

Its in a Layout Grid; Fluid, 40px gutter, breakpoint 320, Pos=floating, padding T&B=40, Maximum width: 1024, col height auto and flexbox. It's split in a 4+8 config.

I have read the guides (is the Desktop Help out or date or obsolete now?) and been back-and-forth between pages. As you say, there are lots of options and combos so not even sure if I have the right settings now... Would I be better using a Flex Grid rather than a Layout Grid for the bottom of the page?

TIA

[Pablo]

The form elements have a fixed size, and therefor at some point they will be cropped.
Please make sure all your element are flexible (full width).

[Starb7]

They are Full Width. Something else that's odd and making me think the whole project is corrupt. I was of the understanding that a text element can have different formatting, size, style, colour, etc for each line/word/character, etc but if I edit the 'CONTACT US' text so say make it bigger and bold, the whole text box takes the same formatting (no, I don't have it all selected) is this correct?

[Pablo]

They are Full Width.

Not according to the HTML.
If you want my help then I need your project file.
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

Something else that's odd and making me think the whole project is corrupt.

I doubt that.

I was of the understanding that a text element can have different formatting, size, style, colour, etc
is this correct?

Yes.
Related tutorial:
http://wysiwygwebbuilder.com/responsive_text.html

[Starb7]

Hi Pablo, yes please, I would really appreciate you help and happy to pay for you time as I have spent another day on this (simple) site and getting nowhere with it.

Issues:

Mobile Device - I am unable to view the contact us form on a mobile device (~5" or less screen) as the right hand edge of the form is cropped. You mentioned that elements should be set to Full Width and AFAIK, they are - which one's aren't set?

Text Object - If I edit a text block, eg the 'Contact Us' Address and change the heading part to say BOLD and a larger font size, the whole text block takes the formatting - I thought each line can have it's own formatting.

Layout issues - if you look at the 'Home' page on a tablet 10" screen, the 'Contact Us' and the Contact Form are side-by-side as expected. If you look at the 'About' page, the Contact Form has gone under the 'Contact Us' text and the font is smaller (using the mobile breakpoint) values - why would this be? This page was a clone of the main page and the main image and text tweaked so I would have expected them to perform the same. The only thing I have noted it the image is deeper on the 'About' page.

Looking forward to your reply and help with this as getting very frustrated with it now.
Many thanks.

[Pablo]

You are using an inline frame which display a page with fixed form. The form on the 'contactus' page is not flexible. All element are fixed.
To create a flexible form you will need to use layout grids instead of a (fixed) form container.
See the example templates.

Text Object - If I edit a text block, eg the 'Contact Us' Address and change the heading part to say BOLD and a larger font size, the whole text block takes the formattin

Correct. All text will have the same size otherwise it cannot be responsive, unless you are using styles. See the tutorial.

If you look at the 'About' page, the Contact Form has gone under the 'Contact Us' text and the font is smaller (using the mobile breakpoint) values - why would this be?

Because both pages have different 'include min-width' settings. See our previous discussion.

[Starb7]

To create a flexible form you will need to use layout grids instead of a (fixed) form container

OK, where do I use the layout grid, presumably on the 'Contact Us' page considering the form is used across several pages and is already in a grid in the pages that use it? Would I have to swap the current method from an iFrame and embed the form separately in each page or can I use a 'master' form? Can you point me in the right direct for the 'flexible form' Support page?

Cheers.


EDIT: Just enabled a 'Layout Grid' Form. I can see you just drag the form element on to the page but with this, there's no control on where they are put, ie spacing and locations so a 'nice form layout' can't be created... or am I missing something else? :/

[Pablo]

where do I use the layout grid, presumably on the 'Contact Us' page

Correct, because that is where you have implemented your form.

considering the form is used across several pages and is already in a grid in the pages that use it?

No, the form is fixed. Just because you use an inline frame does not make the form suddenly flexible.
The form itself must be flexible.

[Starb7]

So putting the form in a layout grid means I can then use that in an inline form? Doesn't seem right but I'll give it a try tomorrow. Cheers

[Pablo]

A form is a fixed/absolute container. it should not be place inside a layout grid (see the FAQ).
However, the layout grid itself can be a form.

FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=71391

Examples with flexible forms:
http://www.wysiwygwebbuilder.com/templates8.html

[Starb7]

See previous reply regards using the grid as a form is, it's total lack of formatting and layout functionality makes it impractical to use. Will have to find another way to sort it. Thanks.

[Starb7]

Just for clarity, can you tell me why is the mobile version of the form getting cropped anyhow when there is plenty of room to show it? Cheers

[Pablo]

A layout grid has the same formatting options as a form container.

The form gets cropped because it has a fixed layout.

If you do not want to use layout grids then you can always use breakpoints to adjust the layout for smaller screens.
Note however that because the form is inside an inline frame you will need to use breakpoints for the viewport of the frame, not the page.

[Starb7]

A layout grid has the same formatting options as a form container.

No it doesn't! I can't get this to work like a normal form, ie I cannot put the elements where I want them (they just stack under each other) so it does not have the same formatting options... unless I am missing something?

The form gets cropped because it has a fixed layout.

I thought there was sufficient space to show it, that's why I was puzzled why it was getting cropped. Will look at putting the form under, rather than at the side to get around this.

you will need to use breakpoints for the viewport of the frame

Could you clarify on this please? I don't see any options to add BreakPoints to an iFrame.

As always, thanks for your patience and help.

[Pablo]

No it doesn't! I can't get this to work like a normal form, ie I cannot put the elements where I want them (they just stack under each other) so it does not have the same formatting options... unless I am missing something?

This has nothing to do with 'formatting'. The elements in a layout grid has floating elements, other wise it would not be flexible! This is the whole purpose of a layout grid...

*** Please read ****
http://www.wysiwygwebbuilder.com/layout_modes.html

Could you clarify on this please? I don't see any options to add BreakPoints to an iFrame.

I am referring to the page with the form.

*** Please read ****
http://www.wysiwygwebbuilder.com/rwd_basics.html

[Starb7]

This has nothing to do with 'formatting'. The elements in a layout grid has floating elements, other wise it would not be flexible! This is the whole purpose of a layout grid...

Sorry, I am confused. You said earlier I can use formatting and now you say I can't? I am not bothered about 'floating' format, I just want the form 'as it is' to fit in the space, that's why I have made it the size it is.

Could you clarify on this please? I don't see any options to add BreakPoints to an iFrame.
I am referring to the page with the form.

OK, I see what you mean - will give it a go.

Cheers

[Starb7]

Hi Pablo

Big thanks - will your patience and help, I think I now have it how I wanted it to look.

Some polishing and tweaking to do, but on the right track now.

Thanks

[Pablo]

It looks like you are mixing up several issues.

You said earlier I can use formatting and now you say I can't?

Formatting = styling.
The Layout grid has the same styling options as the form.

[Starb7]

Formatting = styling.
The Layout grid has the same styling options as the form.

Formatting and Styling are the same (=)? Confused even more!

As I mentioned, I cannot use the Layout Grid 'Form' as you cannot put the element where you want as you can in a standard form. Yes, i know that what responsive means but I never wanted that, I just wanted the form to fit in the space (as it is) and now have that with some margin and BP settings tweaks.

Thanks for your help once again.