Resizing the slideshow banner

[MapTavern]

Hello everyone.

I am going crazy, and I can't figure out what I am missing. I'm trying to reduce the height of my slideshow banners - I don't have an option to create a hero banner. 

I've gotten to the code, and I can see that it's making it magnified by a %, but I can't figure out how to get it to magnify only the width, or at least reduce the height. 

I've copy/pasted the code in question below. Could someone give me a hand? I'm totally stumped. My url is www.maptavern.com and the view code is seimpe

                   style="{% if block.settings.offer_size != blank %}

                           font-size: {{ block.settings.offer_size }}px;line-height:1;margin-bottom:5px;

                           {% endif %}

                           {% if block.settings.offer_color != blank %}

                           color:{{ block.settings.offer_color }};

                           {% endif %} ">

                  {{  block.settings.offer }}

                </span>

                 <h4 class="slide-offer-text animated "

                   style="{% if block.settings.offer_text_size != blank %}

                           font-size: {{ block.settings.offer_text_size }}px;

                           {% endif %}

                           {% if block.settings.offer_text_color != blank %}

                           color:{{ block.settings.offer_text_color }};

                           {% endif %} ">

 {% if section.blocks.size > 0 %}

    <div class="home-slideshow">

      <div class="variable-width" data-slick='{

      dots: true,

      slidesToScroll: 1,

      autoplay:true,

      fade: {{ section.settings.slideshow_transition }},

      autoplaySpeed:{{ section.settings.slideshow_speed }}

  }'>

        {% for block in section.blocks %}

          <div class="slick-list slideshow__slide--{{ block.id }}">                

            {% if block.settings.image != blank %}

            <a href="{{ block.settings.link }}" >

               {%- assign img_url = block.settings.image | img_url: '2000x' -%}

              <img src="{{ img_url }}" data-url="{{ block.settings.link }}" class="slide-img " alt="{{ block.settings.image.alt }}" />

            </a>

             {% else %}

               {% capture current %}{% cycle 1, 2 %}{% endcapture %}

                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

            {% endif %}

            {% if block.settings.title != blank or block.settings.subheading != blank %}         

              <div class="slider-content slider-content-{{forloop.index }}-bg   {% if block.settings.alignment == 'center' %} center-content {% endif %} {% if block.settings.alignment == 'right' %} right-content {% endif %}" 

                   style=" {% if block.settings.heading_color != blank %} background:{{ block.settings.bg_color }}; {% endif %}

                          {% if block.settings.alignment == 'left' %}

                           left:11.4%;

                           right: auto !important;

                           {% endif %}

                          {% if block.settings.alignment == 'right' %}

                           right:10%;left:auto;

                           left: auto !important;

                           {% endif %}  

                          {% if block.settings.alignment == 'center' %}

                          text-align:center;top:35%;

                          {% endif %}

                          ">

                <div class="slide_left" style="float:left; {% if block.settings.alignment == 'center' %} width:100%;text-align:center; {% endif %}">

                <h2 class="slide-heading animated "

                    style="

                            {% if block.settings.alignment == 'center' %}

                           font-weight:600;

                           {% endif %}

                           {% if block.settings.heading_size != blank %}

                           font-size: {{ block.settings.heading_size }}px;

                           {% endif %}

                           {% if block.settings.heading_color != blank %}

                           color:{{ block.settings.heading_color }};

                           {% endif %}">

                  {{ block.settings.title  }}                   

                </h2>

                <h5 class="slide-text animated "

                   style="

                           {% if block.settings.alignment == 'center' %}

                          font-weight:400;letter-spacing:7px;padding:0 0 40px;

                          {% endif %}

                          {% if block.settings.subheading_size != blank %}

                           font-size: {{ block.settings.subheading_size }}px;

                           {% endif %}

                           {% if block.settings.subheading_color != blank %}

                           color:{{ block.settings.subheading_color }};

                           {% endif %} ">

                  {{  block.settings.subheading }}

                </h5>

                 <h2 class="slide-heading slide-heading-2 animated "

                    style="{% if block.settings.heading_size != blank %}

                           font-size: {{ block.settings.heading_size }}px;

                           {% endif %}

                           {% if block.settings.heading_color != blank %}

                           color:{{ block.settings.heading_color }};

                           {% endif %}">

                  {{ block.settings.title_2  }}                   

                </h2>

                </div>

                <div class="slide_middle" style="float:left";>

                <h6 class="slide-offer animated "

                   style="{% if block.settings.vertical_size != blank %}

                           font-size: {{ block.settings.vertical_size }}px;

                           {% endif %}

                           {% if block.settings.vertical_color != blank %}

                           color:{{ block.settings.vertical_color }};

                           {% endif %} ">

                  {{  block.settings.vertical_text }}

                </h6>

                </div>

                <div class="slide_right" style="float:left";>

                 <span class="slide-offe

                  {{  block.settings.offer_text }}

                </h4>

                 <p class="slide-offer animated "

                   style="{% if block.settings.offer_desc_size != blank %}

                           font-size: {{ block.settings.offer_desc_size }}px;

                           {% endif %}

                           {% if block.settings.offer_desc_color != blank %}

                           color:{{ block.settings.offer_desc_color }};

                           {% endif %} ">

                  {{  block.settings.offer_desc }}

                </p>

                </div>

                {% if block.settings.button != blank %}

                <a href="{{ block.settings.link }}" class="slide-button animated btn ">                    

                  {{  block.settings.button }}                  

          </a>

                 {% endif %}

              </div>

            {% endif %}

          </div>

        {% endfor %}

      </div>

       <div class="dt-sc-hr-invisible-medium"></div>

    </div>

[PaulNewton]

Just reduce the height of the image itself.

For lots of code there is a button to insert code sample which increases the chances someone will read hundreds of lines of random code.

[MapTavern]

I tried that, but because the image is being magnified by the code it doesn't make a single bit of difference.