Need to stylize GeoComplete CSS to match rest of form

I added the GeoComplete Widget to my form (a great widget!) but I need to stylize it the same as the rest of the form. Can you look at the form and tell me what CSS I should put in the GeoComplete Widgest Advanced Options?

 

Thanks!

Sam

Please try to inject this custom CSS code to the widget to change the design of the text box.

#geocomplete {

    height: 50px;

    border: 1px solid rgb(204, 204, 204);

    background-color: #fafafa;

    font-size: 20px;

}

To inject the custom CSS code to the widget, just open the widget wizard and go to the Custom CSS tab.

After injecting the custom CSS code to the widget, please try to inject this custom CSS code to your form.

#customFieldFrame_34 { 

 height:60px !important;

}

To inject custom CSS code to your form, just follow the instruction provided in this guide: How to Inject Custom CSS Codes.

 

Do let us know if you need further assistance.

Thanks so much! I made a few more tweaks to the site and form, and now I
need to adjust that style a little more. Would you check it out here:
https://www.remindclient.com/
And tell me how to make the placeholder text the same as the rest of the
form, and make the width of the field the same (the width overflows right
now).
Thanks!
Sam
*Sam Unruh*
Owner, Unruh Furniture
cell: 816.808.5259
...

Add this CSS code to the GeoComplete widget:

#geocomplete {

    width: 657px!important;

}

Your embedded form should look like this after you add the CSS code.

Thanks! That made it the same size on dekstop, but it is still overflowing
...

It seems that I was looking at the wrong form. I was checking the form on this page https://www.remindclient.com/. 

I am trying to find the CSS code to fix the overflowing issue. I will update you via this thread once I find the solution. 

My colleague Chriistian helped me to resolve the overflowing issue. Please add this CSS code to the Form Custom CSS:

#customFieldFrame_34 {

    min-height : 60px !important;

}

How to Inject Custom CSS Codes

To change the width of the widget add this CSS code to the widget CSS field:

#geocomplete {

   max-width: 956px !important;

}

Hope this helps to solve the issue.

Thanks! Can you tell me how to make the placeholder text the same as the
rest of the form?
*Sam Unruh*
Owner, Unruh Furniture
cell: 816.808.5259
...

You can try adding this CSS code into your widget:

#geocomplete::-webkit-input-placeholder {
  font-family: Arial !important;
  font-size: 15pt;
}  

#geocomplete::-moz-placeholder {
  font-family: Arial !important;
  font-size: 15pt;
}  

#geocomplete::-ms-input-placeholder {
  font-family: Arial !important;
  font-size: 15pt;
}  

If you have questions, please let us know.