Form prompt alignment when browser width is narrow such as on an iPhone

[GordonF]

I realise this is probably a theme css change but I thought I'd ask.

On a NetTalk 12 app using flexbox on forms, entry field prompts understandably move from being on the left of the entry to above the related entry when screen width is limited (eg on a phone). However and this is just my own preference I would really like the prompts to be left aligned with the related entries rather than centred where they can sometimes look detached and unrelated.

It there a simple global change I can make so the whole app behaves this way or do I have to override the css for prompts on every form. I use the base theme so perhaps the correct answer is
 to modify the css, obviously I'll then have to maintain my own theme from this point on.

I'm new to WebServer so my question may seem naive, don't worry I'm a quick learner so I won't be constantly asking questions, once again any advice and guidance is welcome.

Cheers
Gordon

[Vinnie]

Hi Gordon.

Yes you could set the prompt size in CSS but I remove the prompt text for phone apps and put the prompt text in Place Holder.
If no data in the form field the Place Holder is displayed.

If  a String field Select String Tab and near the bottom of the options enter 'Place Holder Details' in Place Holder.

Hope this helps

Cheers
Vinnie

[GordonF]

Thank you Vinnie, the app is used across a range of devices, is it possible in WebServer to determine the user is on a reduced width browser such as a phone and serve up a different page?

Gordon

[Vinnie]

Thanks for reply.
Yes you can get screen size information and set ccs iflarge, ifmedium but I found it better for me to simply ask the user Phone, Tablet, PC when they login.

[Bruce]

>> Yes you could set the prompt size in CSS but I remove the prompt text for phone apps and put the prompt text in Place Holder.

you can do that in CSS as well. Indeed hiding the prompt in CSS is no big deal.

>> I realise this is probably a theme css change but I thought I'd ask.

It occurs to me Gordon that you likely don't know how to make Global, Custom, additions to the shipping themes that better suit your preferences. You will really want to be able to do this because it is the cornerstone of making your app look the way _you_ want it to look with the minimum amount of hassle.

The short version is;
a) Add "custom.css" to your CSS file list (webserver, settings, styles, files)
b) create custom.css in your \web\styles folder
c) add your overrides to this file.

As to determining what exactly to put in the file, the technique for doing that is best demonstrated in the user group webinar (because it's mostly visual). So join us this Thursday and ask.
For example changing the prompt to be left justified is really easy.
the short version of that is;
a) use your browser Developer Tools (F12) to inspect the page
b) note which CSS is setting the prompt justification
c) change that.

Cheers
Bruce

[GordonF]

Thank you for the help and advice.

Bruce you are correct in believing I didn't know about using custom.css, I'll start looking at your suggestion, I'll also try to join the webinar this week.

Many Thanks
Gordon