Comment code is collapsed

[Wcowin]

Before it could be displayed very long, now there is a slider and the

element is squashed very short

My code is：

<div id="rcorners5" >

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="655cf3bc-734a-4d88-8317-be350621334c"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>


</div>

extra.css:

#rcorners5 {
  border-radius: 25px;
  border: 2px solid #518FC1;
  padding: 20px;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 600px) {
  #rcorners5 {
    border: none; /* Remove the blue frame on the phone */
  }
}

[kamilkrzyskow]

Hello @Wcowin,
sorry about the late response, I hope the issue has been resolved.
The current behaviour with the code given is expected, hard to say what happened that it stopped working.

Before it could be displayed very long, now there is a slider and the element is squashed very short

I'm guessing that previously, the generated iframe had a constant height, but it reverted back to the default max of 150px.

You could set it with CSS:

#cusdis_thread > iframe {
  height: 30rem;
}

• https://jsfiddle.net/1t9x70mw/10/

There is also a JavaScript solution that helps with automatic resizing, however I've not tried it:

• https://iframe-resizer.com/

[Wcowin]

Thank you @kamilkrzyskow, I have achieved the implementation according to your method. The effect has greatly improved, and I couldn't solve this problem all along. Thank you again.