Minha página de agradecimento não tem responsividade no smartphone

Hi fdc_rede,

Thanks for reaching out to Jotform Support. Our Portuguese Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi fdc_rede,

To make the Thank You Page responsive on both desktop and mobile devices, you can inject custom CSS code into your form. Let me show you how:

1. First, copy this code:

.thankyou .col-1{

  display: none;

}

.thankyou .thankyou-wrapper{

  width: auto !important;

}

2. In Form Builder, click on the Paint Roller icon at the upper right side of the panel to open the Form Designer Menu.

3. Go to the Styles tab, scroll down to the Inject Custom CSS input box and paste the CSS Code. Take a look at the screenshot of the results below:

Desktop:

Mobile Device:

Give it a try and let us know how it goes.

Muito obrigado, Joeni!

Os testes aqui foram um sucesso. Mas em um formulário não funcionou o CSS.

Segue o link do formulário que é o Bio Favela (https://www.jotform.com/build/250685520512654/design)

Muito obrigado!

Pedro Ferraz

FDC

Hi Pedro,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi Pedro,

Consider adding the !important rule to the first style declaration in your code to ensure it takes precedence over other conflicting styles. You can Inject the updated code below:

.thankyou .col-1 {

  display: none !important;

}



.thankyou .thankyou-wrapper {

  width: auto !important;

}

Take a look at the screenshot of the result below:

Give it a try and let us know how it goes.

Parece que seu código está traduzido. Acredito que ele precise estar em Inglês.

Hi fdc_rede,

Could you let us know if the code on your end is being translated? If so, try using the code below:

.thankyou .col-1 {

 display: none !important;

}



.thankyou .thankyou-wrapper {

 width: auto !important;

}

If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better?

Once we hear back from you, we'll be able to move forward with the solution.

Muito estranho. Coloquei o CSS e o formulário do BioFavela não formata.

Não sei porque só ele

Hi fdc_rede,

Could you try making a test submission using an actual mobile device to see if the issue persists?

Give it a try and let us know how it goes.

Fiz no smartphone e ficou assim:

Hi fdc_rede,

I cloned and tested your form on Android and iOS devices, and it shows the Thank You Page correctly. Check out the screenshot below:

Could you confirm the device model, the version of Android or iOS, and the browser you used to test your form?

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Esse formulário já havia sido resolvido. O único que está com problema é o BioFavela

Hi fdc_rede,

Can you try to copy and inject the custom CSS codes below into your form?

.col-2, 

.thankyou-wrapper {

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box;

  padding: 10px;

  margin: auto;

  text-align: center;

}

/* Responsive image handling */

.thankyou-wrapper img {

  max-width: 100% !important;

  height: auto !important;

  display: block;

  margin: 10px auto;

}

/* Font responsiveness */

.thankyou-wrapper p,

.thankyou-wrapper span,

.thankyou-wrapper strong {

  font-size: 16px !important;

  line-height: 1.4;

  word-wrap: break-word;

}

/* Responsive buttons */

.thankYouButtonWrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  margin-top: 20px;

  padding: 10px;

}

.ty-buttons {

  width: 90%;

  max-width: 300px;

  font-size: 16px !important;

  padding: 12px 20px;

  border-radius: 6px;

  text-align: center;

}

Here's the result after injecting the custom CSS codes into the form:

Give it a try and let us know how it goes.