Remove space after product type in grid

Highlighted
New Member
3 0 0

I have been making some edits to my site to make my collection pages more user friendly and less redundant with respect to my product grids.  I have a couple things going on: 

 

First, my website sells a number of different vegetable seeds.  For SEO purposes, I want my product title to include all of the information about the product, for example "Amish Paste Tomato", but on the collection grid page I don't like the look of all of my tomato varieties saying "...Tomato."  My solution was to use the vendor field to create a Product Short Title that I could use in the collection pages. Second, I wanted to move the "Tomato" to another line so it shows in the grid but in a smaller font and a line below the product short title.  I muddled through that and I think I'm happy with the result, except that there is now this awkward space between the product.type and the price or review, whichever the case may be.  Any ideas on what I've done wrong?  Here's my code from product-grid-item.liquid:

 

<div class="grid__item {{grid_item_width}}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ product.url | within: collection }}" class="grid-link">
    <span class="grid-link__image grid-link__image--product">
      {% if on_sale and settings.collections_show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and settings.collections_show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="grid-link__image-centered">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      </span>
    </span>
    <p class="grid-link__title">{{ product.vendor }}</p>
    <p class="product-type">{{ product.type }}</p>
    {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}
    <p class="grid-link__meta">
      {% capture price %}<strong>{{ product.price | money }}</strong>{% endcapture %}
      {% if product.price_varies %}{{ 'products.general.from_html' | t: price: price }}{% else %}{{ price }}{% endif %}
      {% if on_sale %}
        <br><s class="grid-link__sale_price">{{ product.compare_at_price | money }}</s>
      {% endif %}
      {% comment %}{% if settings.product_reviews_enable %}
        <br><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endif %}{% endcomment %}
    </p>
  </a>
</div>

Thanks in advance.

0 Likes
Highlighted
Globetrotter
548 52 53

can you please send your wbsite link and password to open it(if any)

 

I will have a look at it on browser to solve issue

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Highlighted
New Member
3 0 0

My site is https://www.threshseed.com/ There is no password.  Thanks for taking a look!

0 Likes
Highlighted
Globetrotter
548 52 53

do you mean this space between name and review? which we can see at - 

MORE FROM THIS COLLECTION

 

 

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Highlighted
New Member
3 0 0

Yes, the space appears in all of the grid views (homepage, collections, similar products, etc).  When there is a review, it is between the name and the review, otherwise it is between the name and the price.

0 Likes
Highlighted
Globetrotter
548 52 53
yes that space is due to css applied, it can be reduced
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes