-
XARDSAsked on July 26, 2021 at 2:29 PM
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
-
Vanessa_TReplied on July 27, 2021 at 12:25 AM
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;
}
-
XARDSReplied on July 27, 2021 at 9:55 AM
Somehow this isn't working. This is how I injected the code:
-
Andrew Manager of Enterprise Frontline SupportReplied on July 27, 2021 at 3:16 PM
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!
-
XARDSReplied on July 27, 2021 at 5:23 PM
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
-
Vanessa_TReplied on July 27, 2021 at 11:56 PM
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.
-
XARDSReplied on July 28, 2021 at 2:41 PM
hm strange, this is how it looks on my iPhone 8
you sure this is not being displayed on your end?
-
Andrew Manager of Enterprise Frontline SupportReplied on July 28, 2021 at 4:34 PM
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!
-
XARDSReplied on July 29, 2021 at 9:01 AM
Thank you it worked =)