How to center everything?
-
How to center everything instead of it being crowded on the left?
Screenshot: https://prnt.sc/qbu02q
-
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 http://webstylisty.com/index.php/design-026/design-026-book-online/
In the label-placement it was “top-aligned” by defaultHi,
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 4 years, 4 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- This reply was modified 4 years, 3 months ago by politadvokat.
- This reply was modified 4 years, 3 months ago by politadvokat.
- This reply was modified 4 years, 3 months ago by politadvokat.
- This reply was modified 4 years, 3 months ago by politadvokat.
- This reply was modified 4 years, 3 months ago by politadvokat.
- This reply was modified 4 years, 3 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 4 years, 3 months ago by Jan Dembowski.
- This reply was modified 4 years, 3 months 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
- The topic ‘How to center everything?’ is closed to new replies.