Why I cannot maximize the Slider Size?

Hello I am using Laravel Version 5. I wanted to Fit the Slider on a certain Screen or to maximize its size. Apologies since I am still new to using PHP and Laravel.

Here's my code for the slider:

`@extends('layouts.front')

 @section('content')

 @if($ps->slider == 1)

    @if(count($sliders))

        @include('includes.slider-style')
    @endif
@endif

@if($ps->slider == 1)
    <!-- Hero Area Start -->
    <section class="hero-area">
        @if($ps->slider == 1)

            @if(count($sliders))
                <div class="hero-area-slider">
                    <div class="slide-progress"></div>
                    <div class="intro-carousel">
                        @foreach($sliders as $data)
                            <div class="intro-content " style="background-image: url()">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="slider-content">
                                                <!-- layer 1 -->
                                                <div class="layer-1">
                                                    <h4 style="font-size: px; color: " class="subtitle subtitle" data-animation="animated "></h4>
                                                    <h2 style="font-size: px; color: " class="title title" data-animation="animated "></h2>
                                                </div>
                                                <!-- layer 2 -->
                                                <div class="layer-2">
                                                    <p style="font-size: px; color: "  class="text text" data-animation="animated "></p>
                                                </div>
                                                <!-- layer 3 -->
                                                <div class="layer-3">
                                                    <a href="" target="_blank" class="mybtn1"><span> <i class="fas fa-chevron-right"></i></span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

        @endif`

Here is how my Slider is being shown:

As you can see, the slider image was cut. it is not being shown as a full image.(Desktop) But when I change the view to Mobile, it shows full picture and adjust to its size. Should I check other forms inside my folder?

Thank you in the future!

via Chebli Mohamed