FROM CACHE - en_header

Resizing the slideshow banner

MapTavern
Tourist
6 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
4332 321 931

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.

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

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
6 0 0

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