Long title in collapse field causes display issues on mobile

Hi

the title in the collapse field is long which causes some issues on mobile:

1) When collapsed, text and arrow overlap

2) When closed, bottom frame is cut out

Please add the CSS below to fix the border issue when section is collapsed:

ul#section_166.form-section-closed {

height: 91px !important;

}

Guide: How to Inject Custom CSS Codes

Then the CSS below for the text overlapping issue when section is expanded.

ul#section_166.form-section {

margin: 12px 4px !important;

}

Somehow this isn't working. This is how I injected the code:

Hi there,

Thank you for the follow-up! I just checked this form, and it looks like the first issue which you originally raised looks to be resolved when I view this form from my iPhone (see below)

I am having a bit of trouble understanding the second issue. Can you please check this form once more and let us know whether you are still seeing that "the bottom frame is cut out"?

Thank you in advance for your response!

Hey Andrew,

well that depends on how wide your display is. You probably have an iPhone that is wider than my iPhone 8 so the issue won't come up.

This is how it looks on mine:

The last word needs to be broken to the next row. Now, as soon as we have 2 rows you will see that the bottom frame-line of the collapse field will be cut out/ not visible. I had a larger 2-lines-text in this field before but I made a change so now it's only 1 line and thus not visible anymore. After the change I mentioned it probably will be visible again.

Kind regards

I have removed the previous CSS and added the one below into your form:

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

 ul#section_166.form-section-closed {

  height: 91px !important;

 }

 ul#section_166.form-section, ul#section_166.form-section-closed {

  margin: 12px 8px !important;

 }

}

I have also tested this in iPhone 8 and X as well as android and it looks the same.

Please check it again.

hm strange, this is how it looks on my iPhone 8

you sure this is not being displayed on your end?

Hi there,

Thank you for the follow-up! I was able to reproduce this issue when using an iPhone 8 XS. I was able to correct this issue by making one small change to the CSS snippet provided by my colleague.

Please keep all of your existing CSS in place, and make the change described below. Your first CSS statement is as follows:

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

 ul#section_166.form-section-closed {

  height: 91px !important;

 }

Please replace the highlighted value of 91px with 94px.

Please let us know if this does not resolve your issue, and we will begin working on another solution for this problem.

Thank you!

Thank you it worked =)