Inline Comment form is cut off

Here is what I have under custom CSS:

.wpd-inline-shortcode.wpd-active {
color: #000000 !important;
}

.wpd-inline-shortcode {
color: #000000 !important;
}

#et-boc .et_builder_inner_content .et_pb_row:first-child {
z-index: 99999 !important; 
}

.comments-area {
width:auto !important;
}

Here is a post that showing where the inline comment form is getting cut off: https://www.cindyjonesassociates.com/gift-shop-newsletter-aug-15-2020/

Thanks!

@stanbrid,

The issue mostly comes from the active theme. However, we've found some workaround, try to use the CSS code below. It should solve the issue. 

.single .blog-meta {
    display: none;
}
.wpd-inline-form-wrapper {
    margin-left: 36px;
}

Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again. 

Please don't forget to press Ctrl+F5 (twice) on the frontend before checking.

@asti Unfortunately, that code did not work. It only expanded the width of the page content to full-width. Inline comment forms landing along the left column still get get cut off. 🤔

My problem appears to be similar to this forum question, so I had added the CSS provided in the answer.

#et-boc .et_builder_inner_content .et_pb_row:first-child {
z-index: 99999 !important; 
}

Still not working, though. : /

Posted by: @stanbrid

My problem appears to be similar to this forum question, so I had added the CSS provided in the answer.

#et-boc .et_builder_inner_content .et_pb_row:first-child {
z-index: 99999 !important; 
}

Still not working, though. : /

 

This issue doesn't have any relation to yours. Besides the CSS selectors are also different. Please remove that code it doesn't help you. 

Unfortunately, that code did not work. It only expanded the width of the page content to full-width. Inline comment forms landing along the left column still get get cut off. 

Please watch the video I've recorded: https://www.screencast.com/t/07HLvJ1KEbn

@asti That made the page full-width, which is fine. But, now cuts off on left column. : /

@asti This code solved my same problem perfectly. Thanks!

But now my smartphone view is cut off a bit on the right. Could be my theme, but your code worked great on desktop view. Any thoughts? Also, my inline comment box has a light backgrnd with a light font that you can't really see for name and email.  Which css file should I dig into? Thanks!

@tussbaby,

Please open a separate support topic and leave some example URL to allow us to check the issue. 

Hello, any update on a solution for this. Thanks!

@stanbrid,

I may suggest you change the width of the Inline commenting box:

.wpd-inline-form-wrapper {
   width: 342px;
}

The CSS code above should help you to solve the issue. 

The red marked value can be changed as you like. 

This did not fix it. Only made the box bigger. It's still disappearing under the left side column. Cut off and Not visible. With my limited knowledge, seems like the Z-index or something isn't working.