Responsive Form - Submit Button Does Not Scale

[gregcoiro]

Hello,

 

I have implemented the Caspio responsive code on several types of reports and they have worked perfectly.  However, I am now trying to use the responsive code on a submission form and the page width does not adjust correctly.  I believe it is due to the submit button within the form as it is not scaling properly.  Since the submit button image does not adjust, then this impacts the overall width of my page when viewed on a mobile browser.

 

Below is the URL:

http://directlinecruises.com/carsite/freecruisebrochure.htm

 

Any suggestion on how to control the scaling of the submit button to fix this issue?  Thank you.

[svitlanataran]

Hi gregcoiro,

 

Button has "input" type. Responsive code sets width-100% for input elements. You should edit responsive code. 

Find the following code:

#datapage-form input, 
#datapage-form select,
#datapage-form textarea { width: 100% !important; }

And delete the first line: #datapage-form input,

[gregcoiro]

Hi Matilda,

 

Thank you so much for the quick response and I did delete that line of code and it fixed the submit button.  However, the form still does not adapt correctly when using a smart phone screen size.  I'm not sure what I am doing wrong because the site is fully responsive and everything else on the site adjusts.  It also appears the Caspio form adjusts up until a certain break point and then the drop-downs and text boxes no longer adapt to the size of the screen.

 

Any other suggestions would greatly be appreciated.  Once again, thank you.

[svitlanataran]

Hi gregcoiro, you are welcome!

 

Try using a standard button instead of the image. You can customize look of the button in Styles associated with the form. 

Find more information here

 

Please note, in case of using standard button, to make it re-sizable you should paste the following line back to responsive code:

 #datapage-form input,