0

Hello I have a problem I am making comment form and everything works just fine, but I have a problem with comments, especially for mobile devices because it is goes off the container and it makes page scrollable on left and right.
How to break text to next line in text Area? I used word wrap and it fixes it but only for bigger devices.

HTML

<div class="comment-section">
  {% for comment in comments %}
    <div class="comment">
      <div><img class="comment-user-picture" src="{{user.profile.user_image.url}}"></div>
      <p class="comment-user">{{user.username}}</p>
      <p class="user-comment-content">{{comment.content}}</p>
    </div>
  {% endfor %}
</div>

CSS

.user-comment-content{
  grid-row: 2/3;
  grid-column: 2/3;
  margin: -1.2rem 1rem 1rem 0rem;
  word-wrap: break-word;
  font-size: 1.4rem;
}
Peter Krebs
  • 3,831
  • 2
  • 15
  • 29
Kay
  • 591
  • 1
  • 7
  • 27
  • 2
    you can use media query for responsive. – kian Nov 12 '21 at 09:37
  • 2
    Does this answer your question? [Most elegant way to force a TEXTAREA element to line-wrap, \*regardless\* of whitespace](https://stackoverflow.com/questions/47817/most-elegant-way-to-force-a-textarea-element-to-line-wrap-regardless-of-white) – Raptor Nov 12 '21 at 09:40

0 Answers0