My Purchase order is not displaying properly on mobile

My Purchase order looks fine on desktop but when I view from mobile it looks as attached.

Here's the link to my form

https://form.jotform.com/obraim.express/Obraim-Express-Order-Form

Please allow me some time to check this and provide mobile responsive CSS to be able to view the products correctly.

Thanks.

Okay thank you, eagerly waiting

Could you please inject this CSS in your Form Designer:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

.form-line[data-payment="true"] .form-product-item .form-product-item-detail {
  display: contents!important;
}

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know how it goes.

Thanks.

Thank you so much. I hope it's not too much to ask but is it possible to get the tick box to be either beside or beneath the product text?

Hello, I just checked and it went bonkers again.

Based on your request, I have injected this CSS in your form:

media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

.form-line[data-payment="true"] .form-product-item .form-product-item-detail {
  display: contents!important;
}

.form-line[data-payment="true"] .form-product-item .form-product-container {
 
  position:relative;
  width: 80%;
  top: -48px!important;
  left: 26%!important;
}
}

Let us know how it geos.

Thanks.