[Venture Theme] Help removing blank space at the top of slider

Solved
KurePro
Tourist
6 0 1

Hello,

I have successfully removed arrows and numbers and made my banners clickable, but for some reason, I am getting a thin white spacer with "" at the top left between my menu bar and slider, and can't figure it out for the life of me how to remove or hide it. 

I am a novice with code obviously, so any help would be highly appreciated.

Site: Kana Planet

PW: kanaplanet

Screenshot 2021-01-27 105302.png

UmairA
Shopify Partner
586 65 103

This is an accepted solution.

Hey there @KurePro!

You or someone else have added three quotation marks (""") in your HTML code. You need to remove these to get rid of the white line. You can remove them by going to Sections folder > Slideshow.liquid and search for ".hero__image-content" class (Hint: Use CTRL + F), the quotation marks should be next to the div with this class.

 

Hope that helps, if you need my help, you are welcome to contact me.

 

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gmail.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
ahsaniub123
Shopify Partner
50 9 6

This is an accepted solution.

Hi @KurePro 

You made it clickable but you added some extra Quotation("), please double check code and remove double quote signs.  

 

Did my answer work for you? Please drop a Like and Mark it as Accepted.
Want to develop/design/customize your theme Hire me.
Feel free to contact me at Email: ahsan.iub123@gmail.com | Skype: ahsaniub123 | Whatsapp: +92 3012 104 116.
Shopify Expert | Shopify Developer | Liquid Developer
KurePro
Tourist
6 0 1

Thanks for the quick reply guys,
I thought that too, but I think I am either overlooking it, or looking in the wrong place?

 

 

 

 

 

{%- if section.settings.hero_home_height == 'adapt' -%}
  {%- comment -%}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'hero_home_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {%- endcomment -%}

  {%- assign first_block = section.blocks[0] -%}
  {%- if first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
  {%- endif -%}
  {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}

{% if section.blocks.size > 0 %}
  <div class="hero-wrapper hero-wrapper--{{ section.settings.hero_home_height }}"
       role="region"
       aria-label="slideshow"
       aria-describedby="a11y-slideshow-info">
    <div class="hero hero--{{ section.settings.hero_home_height }}{% if section.settings.hero_home_height == 'adapt' %} hero--adapt-height page-width{% endif %}"
         id="Slideshow-{{ section.id }}"
         data-section-id="{{ section.id }}"
         data-section-type="slideshow"
         data-autoplay="{{ section.settings.hero_home_auto }}"
         data-adapt-height="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}"
         data-speed="{{ section.settings.hero_home_auto_speed | times: 1000 }}"
         {% if section.settings.hero_home_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
         style="height: {{- wrapper_height -}}vw"{% endif %}>
      {%- for block in section.blocks -%}
        <div class="hero__slide hero__slide--{{ block.id }}" {{ block.shopify_attributes }}>
          <div class="hero__image-content">"<a data-slide-id="{{ forloop.index }}" href="{{ block.settings.button_link }}">"
            {%- if block.settings.image != blank -%}
              <noscript>
                <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              </noscript>
              {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %}"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">
            {%- else -%}
              {%- if block.settings.image == blank -%}
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </a></div>
              {%- endif -%}
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>
    <div class="hero-content">
      <div class="page-width">
        <div class="hero-content__title-wrapper">
          {%- if section.settings.hero_home_height == 'adapt' -%}
            <div class="hero-content__inner-text">
          {%- endif -%}
          {%- for block in section.blocks -%}
            {%- unless block.settings.title == blank -%}
              <h2 data-slide-id="{{ forloop.index }}" class="hero-content__title h1{% if section.blocks.size == 1 %} hero-title-active{% endif %}">
                {{ block.settings.title | escape }}
              </h2>
            {%- endunless -%}
          {%- endfor -%}
          {%- if section.settings.hero_home_height == 'adapt' -%}
            </div>
          {%- endif -%}
        </div>
        {%- if section.settings.hero_home_height == 'adapt' -%}
          <div class="hero-content__inner-controls">
        {%- endif -%}
        <div class="hero-content__controls">
          {%- if section.blocks.size > 1 -%}
            <div class="hero-content__controls-item hero-content__controls-item--count" aria-label="{{ 'homepage.hero.slide_number' | t: slide_number: '[slide_number]' }}">
              <span class="slide-counter" aria-hidden="true">1/{{ section.blocks.size }}</span>
            </div>
            {%- if section.settings.hero_home_auto -%}
              <div class="hero-content__controls-item hero-content__controls-item--pause">
                <button type="button" class="hero__pause"
                                      aria-live="polite"
                                      aria-label="{{ 'homepage.hero.pause_slideshow' | t }}"
                                      aria-pressed="false"
                                      data-label-pause="{{ 'homepage.hero.pause_slideshow' | t }}"
                                      data-label-play="{{ 'homepage.hero.play_slideshow' | t }}">
                  <span class="hero-toggle-stop">
                    {% include 'icon-pause' %}
                    <span class="icon__fallback-text">{{ 'homepage.hero.pause_slideshow' | t }}</span>
                  </span>
                  <span class="hero-toggle-play">
                    {% include 'icon-play' %}
                    <span class="icon__fallback-text">{{ 'homepage.hero.play_slideshow' | t }}</span>
                  </span>
                </button>
              </div>
            {%- endif -%}
            <ul class="hero-content-navigation">
              <li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow">
                <button class="text"
                        type="button"
                        data-control="previous"
                        aria-label="{{ 'homepage.hero.previous_slide' | t }}">
                  {% include 'icon-arrow-left' %}
                  <span class="icon__fallback-text">{{ 'homepage.hero.previous_slide' | t }}</span>
                </button>
              </li>
              <li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow">
                <button class="text"
                        type="button"
                        data-control="next"
                        aria-label="{{ 'homepage.hero.next_slide' | t }}">
                  {% include 'icon-arrow-right' %}
                  <span class="icon__fallback-text">{{ 'homepage.hero.next_slide' | t }}</span>
                </button>
              </li>
            </ul>
          {%- endif -%}
          {%- for block in section.blocks -%}
            {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
              <a data-slide-id="{{ forloop.index }}"
                href="{{ block.settings.button_link }}"
                class="hero-content__controls-item hero-content__controls-item--text{% if section.blocks.size == 1 %} hero-link-active{% endif %}">
                {{ block.settings.button_label | escape }} <span aria-hidden="true">&rarr;</span>
              </a>
            {%- endif -%}
          {%- endfor -%}
          {%- if section.settings.hero_home_height == 'adapt' -%}
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}

{% schema %}

 

 

 

 

 

 

 

 

 

0 Likes
KurePro
Tourist
6 0 1

Hello @UmairA 

I tried replying with the code, but it was marked as spam, will try again once I am able. Could not find the extra quotation marks myself.

0 Likes
KurePro
Tourist
6 0 1

@UmairA @ahsaniub123 

It was as simple as that, found it. Thank you guys again!

0 Likes