Как правильно выровнять эти стрелки на мобильном устройстве

#html #laravel-blade

Вопрос:

У меня возникли проблемы с выравниванием элементов моей карусели .. они плохо отображаются на мобильном устройстве

 <div class="row">
        <div class="col-12">
            <div class=" owl-carousel custom-arrow" id="trending-slider">
                @foreach($trending as $product)
                        <div class="item">
                            <div class="trending-product">  
                            <div class="add-wish">
                                <form class="addtowishlist-form">
                                    {{csrf_field()}}
                                    @if(Session::has('uniqueid'))
                                        <input type="hidden" name="uniqueid" value="{{Session::get('uniqueid')}}">
                                    @else
                                        <input type="hidden" name="uniqueid" value="{{str_random(7)}}">
                                    @endif
                                    
                                    <input type="hidden" name="title" value="{{$product->title}}">
                                    <input type="hidden" name="product_id" value="{{$product->id}}">
                                    <input type="hidden" name="user_id" value="">
                                    <input type="hidden" id="cost" name="cost" value="{{$product->price}}">
                                   
                                    <i class="fa fa-heart-o product-addWishlist-btn to-wishlist"  id="{{$product->id}}" aria-hidden="true" att="0"></i>
                    
                                </form>
                                
                            </div>
                               <a href="{{url('/product')}}/{{$product->id}}/{{$product->title}}">  <img class="img-responsive" src="{{url('/timthumb.php?src=/assets/images/products')}}/{{$product->feature_image}}amp;amp;w=700amp;amp;h=443" alt="Product Image">
                                <h5>{{$product->title}}</h5></a>
                                <p> {{ substr(str_replace('amp;nbsp;', ' ', strip_tags($product->description)), 0, 600)}}</p>
                                <ul class="price-list">
                                    <li><i class="fa fa-dollar"></i>{{$product->price}}</li>
                                    @if($product->rocketdelivery == 'yes')
                                    <li>
                                        <img class="rocket-delivery" src="{{ URL::asset('kumba/images/rocket-delivery.png')}}">
                                    </li>
                                    @else
                                    <li></li>
                                    @endif
                                </ul>
                                @if($product->bylocal == 'yes')
                                    <img class="buy-local" src="{{ URL::asset('kumba/images/buy-local.png')}}">
                                @endif
                                <div class="ratings">
                                    <div class="empty-stars"></div>
                                    <div class="full-stars" style="width:{{AppReview::ratings($product->id)}}%">
                              
 

Это код, в котором я отобразил продукт в виде карусели. bt, то стрелки теперь проблематичны