Inject Custom CSS - Mobile

Hi. I've loaded my form via IFrame on prestashop, but i've encountered a few nasty problems. First of all, the form is not mobile responsive: when displayed on mobile, the logo appears to be kind of stretched. Secondly, i've integrated logical conditions in my form, so it varies in height depending on what the user selects. Is there a way to make the form able to adapt to the correct height automatically? Thanks in advance.

Hi there,

Thank you for reaching out!

Could you please share the specific form ID and the URL of your website?

Upon receipt, we'll make a few tests and suggests CSS codes that you can use to make the form more responsive.

We'll wait to hear back from you.

Of course. Thanks for your help in advance. I can share with you the ID, but not the URL. The page is offline at the moment. 220531145365044

Hello lorenzo,

Thank you for reaching out to Jotform Support.

You can fix the issue by using custom CSS, you may use the code below using Inject Custom CSS Code:

@media screen and (min-width: 10px) and (max-width: 540px){

.form-all:before {

 background-size: 100%;

}

.form-all {

 width: 100% !important;

}

.form-header-group.hasImage>.header-logo {

 display: table-header-group;

}

}

Please try and let us know how it goes.

Hi,

thanks for your help. Unfortunately, it doesn't work. The logo's still stretched and it automatically cuts the 'submit' button with the same old height problem. It's not that big of a problem, i'll solve by removing the logo and by fixing the height. I've got another question if you don't mind. I'm trying to highlight the text, but the custom css provided in the official guide hasn't any effect. How could I sort it out?

Hi there,

I'm trying to highlight the text, but the custom css provided in the official guide hasn't any effect. How could I sort it out?

To assist you correctly, may we know which particular text are you trying to highlight?

As for your other concern about the invoice, I'll address it here:https://www.jotform.com/answers/3808515

Thank you.

Hi,

probably a screenshot might help you. Probably 'highlighting' is not the correct term, i'd like to have coloured backgrounds next to each highlighted text. Thanks for your patience.

Greetings,

Thanks for waiting, we hope you are safe and well. I have cloned your form and tried to achieved your goal but failed to do so. I have created a slightly similar to what you goal is, please visit the form URL below:

https://support.jotform.com/build/220593479897476#preview

Please let us know If this will good/fit to your goal. If so, you can use the css code below:

.form-label.form-label-top {
  background-color : #dec049;
}

I hope this will help. If you have any further questions, please let us know. We'd be more than happy to help.

Thanks and have an amazing day!

Hi,

thanks for your help. I realised that I probably prefer the old one, but thanks anyway.

Hello,

I moved your other question to a separate thread so we can address it properly.

Here is the link to the other thread: https://www.jotform.com/answers/3809255

We'll get back to you there shortly. If you have any further questions or concerns about the same issue, you can post them there.

Regards,