Collection List leaves a large gap when used with Collections that have a custom image

Solved
NatashaF
Tourist
6 0 3

Hello,

Whenever I try to use a custom image for my collections, they end up with a large gap between the page title and the actually image in the Collection List section. If I don't upload my own collection image, there doesn't seem to be a problem. The strange thing is, the photos I am using for my custom collection image are the exact same as the ones used for the products listed in said collection.  Please see below for images.

This is how the Collection List looks without using custom collection images .

collection list gap.png

This is how it looks when I have uploaded a custom collection image.

collection list no gap.png

Can someone please help me remove this large gap? 

PS I am using Venture theme. Thank you!

0 Likes
dmwwebartisan
Shopify Partner
4448 1002 1276

@NatashaF 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
NatashaF
Tourist
6 0 3

Here is the URL to a page that has custom images set for the collections:
Air Chucks – Veritech Mfg. & Wholesale Inc.

Here is one that does not have custom collection images:
Gauges – Veritech Mfg. & Wholesale Inc.

The password is Ver1tech.

 

The code I am using looks like this:

<style>
.custom-content-wrapper--{{ section.id }} .custom-content__section-header {
color: {{ section.settings.heading_color }};
}

{% if section.settings.background_color != blank %}
.custom-content-wrapper--{{ section.id }} {
background-color: {{ section.settings.background_color }};
}
{% endif %}
</style>

<div class="custom-content-wrapper custom-content-wrapper--{{ section.id }} {% if section.settings.top_margin %}custom-content-wrapper--top-margin{% endif %} {% if section.settings.bottom_margin %}custom-content-wrapper--bottom-margin{% endif %} one-whole" data-section-id="{{ section.id }}" data-section-type="custom-content">
<div class="page-width">
{% if section.settings.heading_text != blank %}
<h2 class="custom-content__section-header text-center">{{ section.settings.heading_text | escape }}</h2>
{% endif %}

<div class="custom-content">
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign block_width = 'medium-up--one-quarter' -%}
{% when '33%' %}
{%- assign block_width = 'medium-up--one-third' -%}
{% when '50%' %}
{%- assign block_width = 'medium-up--one-half' -%}
{% when '66%' %}
{%- assign block_width = 'medium-up--two-thirds' -%}
{% when '75%' %}
{%- assign block_width = 'medium-up--three-quarters' -%}
{% when '100%' %}
{%- assign block_width = 'one-whole' -%}
{% endcase %}
<div class="custom__item custom__item--{{ block.id }} small--one-whole {{ block_width }} {% if block.settings.alignment %}align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}">
{% case block.type %}
{% when 'image' %}

{% comment %}
Custom Image Block
{% endcomment %}

{% if block.settings.image != blank %}
<div class="custom__block-image-container" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%">
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="custom__block-image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">

<noscript>
<img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.image.alt | escape }}" class="custom__block-image">
</noscript>
</div>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

{% when 'text' %}

{% comment %}
Custom Text Block
{% endcomment %}
<style>
.custom-content-wrapper--{{ section.id }} .custom__item--{{ block.id }} .custom__block-heading-text {
color: {{ block.settings.heading_color }};
}

.custom-content-wrapper--{{ section.id }} .custom__item--{{ block.id }} .custom__block-body-text {
color: {{ block.settings.paragraph_color }};
font-size: {{ block.settings.paragraph_size | append: 'em' }};
}
</style>


<div class="text-{{ block.settings.align_text }}">
{% if block.settings.heading_text != blank %}
<h2 class="custom__block-heading-text {{ block.settings.heading_style }}">{{ block.settings.heading_text | escape }}</h2>
{% endif %}
{% if block.settings.paragraph_text != blank %}
<div class="custom__block-body-text rte-setting">{{ block.settings.paragraph_text }}</div>
{% endif %}
</div>
{% when 'video' %}

{% comment %}
Custom Video Block
{% endcomment %}
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
{% when 'product' %}

{% comment %}
Custom Product Block
{% endcomment %}

{%- assign product = all_products[block.settings.product] -%}

{% if product.title.size > 0 %}
<a href="{{ product.url }}" class="card__wrapper text-center{% if block.settings.show_spacing %} card__wrapper--padding{% endif %}">

{% if product.featured_image != blank %}
<div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%">
{% assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="card__image lazyload fade-in"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">

<noscript>
<img src="{{ product.featured_image.src | img_url: '1024x1024' }}" alt="{{ product.featured_image.alt | escape }}" class="card__image">
</noscript>
</div>
{% endif %}

<div class="card__info">
<div class="card__brand">{{ product.vendor }}</div>
<div class="card__name h4">{{ product.title }}</div>

<div class="card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="card__price--sale">{{ product.price | money_without_trailing_zeros }}</span>

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="card__price--regular-strike">
<span class="card__price--regular">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
</span>
{% endif %}

{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{% endif %}
</div>
</div>
</a>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

<div class="card__info">
<div class="card__brand">{{ 'homepage.onboarding.product_vendor' | t }}</div>
<div class="card__name h4">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="card__price">$19.99</div>
</div>
{% endif %}
{% when 'collection' %}

{% comment %}
Custom Collection Block
{% endcomment %}

{%- assign collection = collections[block.settings.collection] -%}

{% unless collection == empty %}
<a href="{{ collection.url }}" class="card__wrapper text-center">

{% if collection.image %}
{% assign collection_image = collection.image %}
{% else %}
{% assign collection_image = collection.products.first %}
{% endif %}

{% if collection_image != blank %}
<div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: collection_image.aspect_ratio | times: 100}}%">
{% assign img_url = collection_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="card__image lazyload fade-in"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ collection_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ collection_image.alt | escape }}">

<noscript>
<img src="{{ collection_image | img_url: '1024x1024' }}" alt="{{ collection_image.alt | escape }}" class="card__image">
</noscript>
</div>
{% endif %}

<div class="card__info">
<div class="card__name h4">{{ collection.title }}</div>
{% if section.settings.show_description and collection.description != blank %}
<div class="rte card__description">
{{ collection.description | strip_html | truncatewords: 15 }}
</div>
{% endif %}
</div>
</a>
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

<div class="card__info">
<div class="card__name h4">{{ 'homepage.onboarding.collection_title' | t }}</div>
</div>
{% endunless %}
{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}
{% endcase %}
</div>
</div>

{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>

{% schema %}
{
"name": "Custom content 1",
"class": "index-section index-section--custom-content",
"settings": [
{
"type": "checkbox",
"id": "top_margin",
"label": "Top margin",
"default": true
},
{
"type": "checkbox",
"id": "bottom_margin",
"label": "Bottom margin",
"default": true
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "text",
"id": "heading_text",
"label": "Text",
"default": "Talk about your brand"
},
{
"type": "color",
"id": "heading_color",
"label": "Color",
"default": "#3a3a3a"
},
{
"type": "select",
"id": "heading_style",
"label": "Style",
"default": "h3",
"options": [
{
"value": "h1",
"label": "Heading 1"
},
{
"value": "h2",
"label": "Heading 2"
},
{
"value": "h3",
"label": "Heading 3"
},
{
"value": "h4",
"label": "Heading 4"
},
{
"value": "h5",
"label": "Heading 5"
},
{
"value": "h6",
"label": "Heading 6"
}
]
},
{
"type": "header",
"content": "Paragraph"
},
{
"type": "richtext",
"id": "paragraph_text",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "color",
"id": "paragraph_color",
"label": "Color",
"default": "#4a4a4a"
},
{
"type": "select",
"id": "paragraph_size",
"label": "Size",
"default": "1",
"options": [
{
"value": "1",
"label": "Medium"
},
{
"value": "1.25",
"label": "Large"
},
{
"value": "1.5",
"label": "Extra large"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "25%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
},
{
"type": "select",
"id": "align_text",
"label": "Horizontal alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "25%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "Video link",
"accept": ["youtube", "vimeo"],
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "100%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "top",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "header",
"content": "Image"
},
{
"type": "checkbox",
"id": "show_spacing",
"label": "Enable image spacing"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "25%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "center",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top",
"label": "Top middle"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom",
"label": "Bottom middle"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
]
}
]
},
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "25%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
},
{
"type": "html",
"name": "Custom HTML",
"settings": [
{
"type": "html",
"id": "code",
"label": "HTML",
"default": "<div><p>Write your own custom HTML content.</p></div>"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Container width",
"default": "25%",
"options": [
{
"value": "25%",
"label": "25%"
},
{
"value": "33%",
"label": "33%"
},
{
"value": "50%",
"label": "50%"
},
{
"value": "66%",
"label": "66%"
},
{
"value": "75%",
"label": "75%"
},
{
"value": "100%",
"label": "100%"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"info": "Position relative to other content blocks on the same row",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
]
}
]

 


}
{% endschema %}

dmwwebartisan
Shopify Partner
4448 1002 1276

This is an accepted solution.

@NatashaF 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-page .card__image-wrapper{padding-top:0% !important;}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
NatashaF
Tourist
6 0 3

You are a genius!

 

Thank you!