Few Styling Questions

Few CSS questions:

1. Can i use a google font for the form field labels and text?

I want to use Raleway if possible.

2. There used to be 'Make this Form Responsive' option in the advanced builder. How can i make this form responsive?

3. I keep removing the background - i want it to be transparent. It keeps displaying with a white background. Is there a way to force the white background to be transparent?

My form is:

New Flexogenix.com Homepage Form

Yes thats all fully possible:

#1. How to Use Google Fonts in your Form

#2. Mobile Responsive Widget

#3. Making the Form Background Transparent 

#2. After creating a form after clicking on that responsive widget- and using the advanced designers- it reverted back to being un responsive.

How can this be fixed?

https://form.jotform.us/71924278358164

Also, how can i make the dropdown menus square and the same height as my other form fields?

You form doesnt have the "mobile responsive widget". Simply search for it on the widget tab on the left:

And then drag it onto your form. It will automatically adjust your form to display on smaller screens.

As to your second question, you are using a theme right? If you change it back to the default theme the form will have the standard components.

 It will look like this:

i see the mobile widget now-

I like how it responds after 1170pixels- but at 1616 pixels- it looks off. The request appointment button is larger and all the form fields remain short. Is there a way to fix this so that eveything remains short- than at 1170 pixels all the form fields can expand to fullwidth of container?

https://form.jotform.us/71924278358164

see attachment of the issue.

You can change the maximum width of the from. You just inject this CSS code:

.form-all {
    max-width: 1600px !important;
}

Here's a guide how to inject the CSS:

How to Inject Custom CSS Codes

what is the best code to create some room/padding around the form when it shrinks down into mobile screen?

That depends on which device you will view your form, but this code would work, for example on iPhone 6,7:

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) { 

.form-all{

  padding: 30px!important;

}  

}

Just copy it in your Custom CSS Field. And if you need more padding just increase the number.

Let us know how it worked.

Thank you!

is there a way- for my form to look like the attachment image up unto 1280pixels? After 1279 pixels- the form fields can expand full width across the whole container- but 1280pixels and higher, I would like my form to look like the attached image.

Is this possible?

Well, that might be doable with media queries, for example:

@media only screen 

and (min-device-width : 1280px) 

{

 .form-all {

    width: 700px!important;

}

}

But I'm not sure how that would work since I don't know how your form is embedded, could you share the website URL where the form is embedded?

Also, media queries depend on device's resolution.

We'll wait for your response.

Thank you!

http://abb.5d3.myftpupload.com/

lives on this page

You need to increase the width of the Div of your webpage where you have embedded your form. Please try embedding this code where you have embedded your form's code:

<style type="text/css">

.et_pb_row et_pb_row_4{

    width: 1300px !important;

}

</style>

Result:

hmm- when i add that to my site- the form is no longer responsive. i do need the form to expand out after 1279 pixels.

Is there another fix?

Yes, the fixed widths will not be responsive.

Let's try this, I saw that the form is embedded in the div with those two classes that my colleague mentioned, so let's try to set their width to 100%:

.et_pb_row_4.et_pb_row {

    width: 100%!important;

}

Insert that line in your CSS of the website.

That should make the form look the same for the resolutions above 1280px and it stays responsive for resolutions below 1280px.

I tested in your website and it worked fine.

Please try and let us know how it worked.

Thank you!

this is so close! I now have the form look good until 1295 pixels. i really want the form to look good until 1280 pixels then switch at 1279pixels.

do i need to set a min width?

I found the below solution:

That will switch at 1279px.

Here is how it works:

It switches exactly at 1280px (you can see the resolution in the upper right corner.

Please insert the above CSS in your website and let us know how it worked.

Thank you!

thank you for your help!!!

going back to this answer on this thread:

That depends on which device you will view your form, but this code would work, for example on iPhone 6,7:

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) { 

.form-all{

  padding: 30px!important;

}  

}

It looks good on the iphone- but on an android there is no padding. How can I fix that with css?

What is the android device you are using? Can you try if this code works for it:

@media only screen and (max-width: 480px) {

.form-all{

  padding: 30px !important;

}  

}