Jetpack by WordPress.com
[resolved] Jetpack transparent box - large div (7 posts)

  1. Razique
    Posted 1 year ago #

    Hi guys,
    it's been a while since this one is around, but I decided today would be a good day!
    So basically, for a page on my website; let's say:
    I'm using the Jetpack comment feature, with the transparent design. What happens is that there is this big white space (I guess it's the box' div):

    But when I click in the comment field, to leave a reply, the div size adjusts:

    So my question is: can I adjust the DIV size as well, before clicking into the field, in order to remove this ugly white space?




  2. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hi Raz,

    We've seen this happen occasionally; as a quick check, can you switch to the default TwentyTwelve or TwentyThirteen theme temporarily, to see if the issue lies with your theme, somehow?

  3. Razique
    Posted 1 year ago #

    Unfortunately, I cannot change it in production directly...
    Simply removing
    height: <?php echo $height; ?>px;
    line 253 in modules/comments/comments.php did the trick.
    The height is hard coded:

    $height           = $params['comment_registration'] || is_user_logged_in() ? '315' : '430'; // Iframe can be shorter if we're not allowing guest commenting

    Why is that?

    thanks !

  4. Razique
    Posted 1 year ago #

    I also tried both scenarios, as being logged in and logged out (since div height is based on whether or not the user is registered if I'm not mistaken, and both work just fine.

  5. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    If you set the height of the #commentform element via CSS to something like 200px, that should fix your issue.

  6. Razique
    Posted 1 year ago #

    That did it, perfect.
    Thanks Richard!

  7. Razique
    Posted 1 year ago #

    Here is the best solution I found so far:

    #commentform {
      height: 87px;
      transition: height 2s;
      -webkit-transition: height 2s;
    #commentform:hover {
      height: 420px;

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic