Edited style for comment section for single-blog page

resources/sass/home/home.scss

@@ -39,6 +39,7 @@ a {
     }
 }
 
+// style for content single article page
 .container-article-width {
     @media screen and (min-width: 1400px){
         max-width: 1200px;
@@ -162,6 +163,7 @@ a {
     }
 }
 
+// comments
 .comment-customers {
     .parent-reply-body {
         .reply-post {
@@ -170,6 +172,7 @@ a {
             height: 22px;
             padding-left: 0.625rem;
             .reply-post-icon {
+                transition: all 0.5s ease;
                 &:hover {
                     cursor: pointer;
                 }
@@ -201,6 +204,9 @@ a {
                 color: $primary;
                 font-weight: 600;
                 padding-left: 0.625rem;
+                @media screen and (max-width: 576px){
+                    margin-bottom: 0.5rem;
+                }
             }
             .item-details {
                 display: flex;
@@ -219,5 +225,13 @@ a {
                 }
             }
         }
+        .user-comment-text {
+            margin: 1rem 0;
+            text-align: justify;
+        }
     }
+    .form-reply-opinion {
+        margin: 0.5rem 0 1.5rem;
+    }
+
 }

resources/views/home/single-blog.blade.php

@@ -148,50 +148,51 @@
                         </button>
                     </div>
                     <hr>
-                    <!-- comments user form -->
-                    <div class="pb-4 opinion">
-                        <h5>
-                            دیدگاه کاربران
-                        </h5>
-                        <p>
-                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
-                        </p>
-                        <div class="form-opinion">
-                            <form action="">
-                                <div class="row">
-                                    <div class="col-lg-4 col-md-6 mb-2">
-                                        <div class="form-group">
-                                            <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                    <div class="comments-holder">
+                        <!-- comments user form -->
+                        <div class="comments-content">
+                            <h5>
+                                دیدگاه کاربران
+                            </h5>
+                            <div class="my-3">
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
+                            </div>
+                            <div class="form-opinion">
+                                <form action="">
+                                    <div class="row">
+                                        <div class="col-lg-4 col-md-6 mb-2">
+                                            <div class="form-group">
+                                                <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div class="col-lg-4 col-md-6 mb-2">
-                                        <div class="form-group">
-                                            <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                        <div class="col-lg-4 col-md-6 mb-2">
+                                            <div class="form-group">
+                                                <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div class="col-lg-4 col-md-12 mb-2">
-                                        <div class="form-group">
-                                            <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                        <div class="col-lg-4 col-md-12 mb-2">
+                                            <div class="form-group">
+                                                <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div class="col-md-12 mb-2">
-                                        <div class="form-group">
-                                            <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                        <div class="col-md-12 mb-2">
+                                            <div class="form-group">
+                                                <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-12">
+                                            <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
                                         </div>
                                     </div>
-                                    <div class="col-md-12">
-                                        <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
-                                    </div>
-                                </div>
-                            </form>
+                                </form>
+                            </div>
                         </div>
-                    </div>
-                    <!-- show comments user -->
-                    <div class="pb-5 comment-customers">
-                        <div class="media border p-3 mt-3">
-                            <div class="media-body">
-                                <div class="parent-reply-body">
-                                    <p class="user-description">
+                        <!-- show comments user -->
+                        <div class="pb-5 comment-customers">
+                            <div class="media border p-3 mt-3">
+                                <div class="media-body">
+                                    <div class="parent-reply-body">
+                                        <div class="user-description">
                                         <span class="user-description-holder">
                                             <span class="user-name">
                                                 آرش محبی
@@ -208,7 +209,7 @@
                                                 </span>
                                             </span>
                                         </span>
-                                        <span class="d-flex">
+                                            <span class="d-flex">
                                             <span class="reply-post">
                                                 <i class="fa fa-reply reply-post-icon"></i>
                                             </span>
@@ -217,101 +218,71 @@
                                                 <i class="fa fa-heart-o"></i>
                                             </span>
                                         </span>
-                                    </p>
-                                    <p class="text-justify">
-                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
-                                        چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
-                                    </p>
-                                    <div class="form-reply-opinion" style="display: none;">
-                                        <form action="">
-                                            <div class="row">
-                                                <div class="col-lg-4 col-md-6 mb-2">
-                                                    <div class="form-group">
-                                                        <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                        </div>
+                                        <div class="user-comment-text">
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها
+                                            چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
+                                        </div>
+                                        <div class="form-reply-opinion" style="display: none;">
+                                            <form action="">
+                                                <div class="row">
+                                                    <div class="col-lg-4 col-md-6 mb-2">
+                                                        <div class="form-group">
+                                                            <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                                        </div>
                                                     </div>
-                                                </div>
-                                                <div class="col-lg-4 col-md-6 mb-2">
-                                                    <div class="form-group">
-                                                        <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                                    <div class="col-lg-4 col-md-6 mb-2">
+                                                        <div class="form-group">
+                                                            <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                                        </div>
                                                     </div>
-                                                </div>
-                                                <div class="col-lg-4 col-md-12 mb-2">
-                                                    <div class="form-group">
-                                                        <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                                    <div class="col-lg-4 col-md-12 mb-2">
+                                                        <div class="form-group">
+                                                            <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                                        </div>
                                                     </div>
-                                                </div>
-                                                <div class="col-md-12 mb-2">
-                                                    <div class="form-group">
-                                                        <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                                    <div class="col-md-12 mb-2">
+                                                        <div class="form-group">
+                                                            <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-12">
+                                                        <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
+                                                        <button class="btn btn-danger btn-cancel-reply"><span>انصراف</span></button>
                                                     </div>
                                                 </div>
-                                                <div class="col-md-12">
-                                                    <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
-                                                    <button class="btn btn-danger btn-cancel-reply"><span>انصراف</span></button>
-                                                </div>
-                                            </div>
-                                        </form>
+                                            </form>
+                                        </div>
                                     </div>
-                                </div>
-                                <div>
-                                    <div class="media px-3 pt-3">
-                                        <div class="media-body">
-                                            <div class="parent-reply-body">
-                                                <p class="mb-2 d-flex">
-                                                        <span>
-                                                            <strong>
-                                                                رضا ناصری
-                                                            </strong>
+                                    <div>
+                                        <div class="media px-3 pt-3">
+                                            <div class="media-body">
+                                                <div class="parent-reply-body">
+                                                    <div class="user-description">
+                                                    <span class="user-description-holder">
+                                                        <span class="user-name">
+                                                            آرشftgyrht محبی
                                                         </span>
-                                                    <span class="d-flex ml-2 item-details">
+                                                        <span class="item-details">
                                                             <i class="fa fa-clock-o item-details-clock"></i>
-                                                            <span class="item-details-date pl-2">
-                                                                ۱۷ خرداد ۱۳۹۹
-                                                                <span class="pl-1 border-right">
+                                                            <span>
+                                                                <span class="item-details-date">
+                                                                    ۱۷ خرداد ۱۳۹۹
+                                                                </span>
+                                                                <span class="item-details-time">
                                                                     ۱۲:۱۸
                                                                 </span>
                                                             </span>
                                                         </span>
-                                                    <span class="d-flex ml-auto">
-                                                            <span class="reply-post-like-button">
-                                                                <span class="reply-post-like-count">۱۲</span>
-                                                                <i class="fa fa-heart-o"></i>
-                                                            </span>
-                                                        </span>
-                                                </p>
-                                                <p class="text-justify">
-                                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
-                                                    با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
-                                                </p>
-                                                <div class="form-reply-opinion" style="display: none;">
-                                                    <form action="">
-                                                        <div class="row">
-                                                            <div class="col-lg-4 col-md-6">
-                                                                <div class="form-group">
-                                                                    <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
-                                                                </div>
-                                                            </div>
-                                                            <div class="col-lg-4 col-md-6">
-                                                                <div class="form-group">
-                                                                    <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
-                                                                </div>
-                                                            </div>
-                                                            <div class="col-lg-4 col-md-12">
-                                                                <div class="form-group">
-                                                                    <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
-                                                                </div>
-                                                            </div>
-                                                            <div class="col-md-12">
-                                                                <div class="form-group">
-                                                                    <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
-                                                                </div>
-                                                            </div>
-                                                            <div class="col-md-12">
-                                                                <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
-                                                                <button class="btn btn-danger btn-cancel-reply"><span>انصراف</span></button>
-                                                            </div>
-                                                        </div>
-                                                    </form>
+                                                    </span>
+                                                    </div>
+                                                    <div class="user-comment-text">
+                                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها
+                                                        با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
@@ -321,7 +292,6 @@
                         </div>
                     </div>
                 </div>
-                </div>
             </div>
         </div>
     @endslot