Jump to content
  • 0
gregcoiro

Responsive Form - Submit Button Does Not Scale

Question

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.

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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,

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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,

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...