How to center everything?

Hi,

Use the following styles to center all the form:

#fbuilder .fields{text-align:center}
#fbuilder .captcha{text-align:center}
.pbSubmit{text-align:center;float:none;width:50%;margin:auto}

In addition to that in the “Label Placement” settings field keep top-aligned:

https://apphourbooking.dwbooster.com/images/articles/customizing/form-templates.png

More info about styles:

https://apphourbooking.dwbooster.com/blog/2018/11/02/customizing-styles/

Thank you.

Unfortunately, doesn’t work properly. Screenshot:
https://prnt.sc/qdco3r
The link to the page https://webstylisty.com/index.php/design-026/design-026-book-online/
In the label-placement it was “top-aligned” by default

Hi,

Add the following CSS rules (includes centering the fields and some improvements for the the captcha styles and phone fields):

#fbuilder .calendarclass{width:50%;margin:auto}
#fbuilder .cff-phone-field{width:50%;margin:auto;}
#hdcaptcha_cp_appbooking_post_1{width:50%}
and remove this rule
#fbuilder .calendarclass .ahbfield_service{width:50% !important;margin: auto;}

Thank you for the feedback!

• This reply was modified 5 years, 2 months ago by codepeople.

Excellent! But there is one little problem area remains:
code: https://prnt.sc/qguqqu
front-end: https://prnt.sc/qgur1a
How can I center that?
If I put the field size 50%, then the fields slide to the next row – which is not desirable.
Front-end: https://prnt.sc/qgussn

[ Please do not bump. ]

• This reply was modified 5 years, 2 months ago by politadvokat.
• This reply was modified 5 years, 2 months ago by politadvokat.
• This reply was modified 5 years, 2 months ago by politadvokat.
• This reply was modified 5 years, 2 months ago by politadvokat.
• This reply was modified 5 years, 2 months ago by politadvokat.
• This reply was modified 5 years, 2 months ago by Jan Dembowski.

Hi,

Please add the following style:

#fbuilder .uh_phone{display:inline-block;float:none}

Thank you!

Then it looks like that: https://prnt.sc/qhxf2f
But I know how to solve this issue – I will just make sure that the lengh of all the three fields equals 300%. Because the problem occurs only when the third field is more than 100%. So If I’ll make the first two 90% and the third 120% it should work. You already told me how to change the length of the third field https://prnt.sc/qhxg0d Can you also tell me how to change the first two please?

[Moderator note: Please, No bumping.]

• This reply was modified 5 years, 2 months ago by Jan Dembowski.
• This reply was modified 5 years, 1 month ago by Steven Stern (sterndata).

Hi,

The related style for that field is the following:

.uh_phone input{width:80% !important}

Thank you!

Doesn’t work, then it looks even worse
https://prnt.sc/qntxgu