Los precios aparecen en el móvil pero no en el iPad.

I just realized that everything works fine if I test it from my iPad, but if I send myself the link and open it from my cell phone, the prices appear both in the order and in the “review before sending” window. What can I do in this case?

Specifically, I want to send it via WhatsApp and have clients answer it there.

Thank you!

Hi Martha,

You can easily keep product details from shifting on mobile devices by adding CSS code to your form. Let me show you how:

1. First copy the code below:

form {

 min-width: min-content;

}



.value.border {

  display: inline-block;

  max-width: fit-content;

  overflow: hidden;

  white-space: nowrap;

}



.value.border:after {

  content: " GratisMXN";

  display: inline-block;

  text-indent: -9999px; /* Push text out of view */

}



li.textarea[data-qid="32"] .value.border {

 text-wrap: auto;

}

2. In Form Builder, on the right side of the page, click on the Paint Roller icon to open Form Designer.

3. Now, under the Styles tab, scroll down and paste the code you copied into the Inject CSS Code box.

That's it. Your code is saved automatically. Check out the screencast below to see my results:

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

Good day! I tried with that code, but the word "GRATS" is still visible, and the button is gray.

Hi Martha,

I understand that you want to fix the button and text on Mobile view. I'll need a bit of time to look into this. I'll get back to you as soon as possible.

Thanks for your patience, we appreciate it.

Hi Martha,

You'll need to inject a CSS Code that works for Mobile to change the button and remove the GratisMXN text. To make sure there are no mistakes in the code, you'll have to replace the whole thing. Here's how to do it:

1. First, copy this CSS Code:

.form-product-details {

display : none;

}



.review-payment,

.review-item-price {

display: none !important;

}



.review-item-price {

display: none !important;

}

#checkSubmission #previewContainer ul.preview-product, #previewContainer ul.preview-subproduct {

padding: 0 100px 0 0 !important;

margin-left: -1.07in !important;

background-color: white !important;

}

/*Ends here*/



.form-submit-review {

background-color: #28a745 !important; /* Verde */

color: white !important;

border-radius: 5px !important;

font-size: 16px !important;

}

.form-submit-review:hover {

background-color: #218838 !important;

}

.form-product-details {

display: none !important;

}



#previewContainer > ul > li.checkbox > div.value.border > ul:nth-child(1) > li:nth-child(2) {

transform : translatex(1px);

}



/* Refuerzo para dispositivos pequeños (móviles) */

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

.form-product-details {

display: none !important;

}

#previewContainer > ul > li.checkbox > div.value.border > ul:nth-child(1) > li:nth-child(2) {

transform : translatex(1px);

}



div.form-all .form-buttons-wrapper button.preview-submission-button {

background-color: #18BD5B !important;

color: #fff !important;

}



form {

min-width: min-content;

}



.value.border {

white-space: nowrap;

}



.value.border:after {

content: " GratisMXN";

display: inline-block;

text-indent: -9999px; /* Push text out of view */

}



li.textarea[data-qid="32"] .value.border {

text-wrap: auto;

}

}



/* Refuerzo para pantallas grandes (escritorio) */

@media screen and (min-width: 1024px) {

.form-product-details {

display: none !important;

}



div.form-all .form-buttons-wrapper button.preview-submission-button {

background-color: #18BD5B !important;

color: #fff !important;

}



form {

min-width: min-content;

}



.value.border {

white-space: nowrap;

}



.value.border:after {

content: " GratisMXN";

display: inline-block;

text-indent: -9999px; /* Push text out of view */

}



li.textarea[data-qid="32"] .value.border {

text-wrap: auto;

}

}

2. In Form Builder, click on the Paint Roller icon on the top right side of the page.

3. Under the Styles tab, scroll down to the Inject CSS Code text bar, and delete all of the code.

4. Finally, paste the code that you copied to the text bar.
That's it. Here's an example of how it looks on desktop:

And here's an example of how it looks on mobile:

Reach out again if you have any other questions.

funcionó perfecto! Muchas gracias =)