Resizing the slideshow banner

MapTavern
Tourist
5 0 0

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>
Replies 2 (2)
PaulNewton
Shopify Partner
3499 234 684

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.

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
MapTavern
Tourist
5 0 0

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