help tweaking code to fix column spacing

New Member
5 0 0

I've done the best i can at this point and am at a loss for how to alter the code to minimize the spacing between these three image columns. Here is the code and an image of how it presently looks.

 

 

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>
{% comment %}
Collections are listed here.
{% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'large--one-quarter large-up--one-quarter medium--one-third medium-up--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'large' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}

<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

{% for link in linklists[page.handle].links %}

{% if link.type == 'collection_link' %}

{% comment %}
If we have a collection link.
{% endcomment %}

{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}

<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid__image product-grid-image">
<a href="{{ link.url }}" class="grid-image--centered">
{% comment %}
Bring in the featured image of the first product in the collection if no collection
image has been uploaded for it.
{% endcomment %}
{% if collection.image %}
<img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
{% else %}
{% assign product = collection.products.first %}
<img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
{% endif %}
</a>
</div>
<p class="collection-grid__item-title">

</p>
</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% elsif link.type == 'page_link' %}

{% comment %}
If we have a page link.
{% endcomment %}

{% assign number_of_links = number_of_links | plus: 1 %}

{% assign linked_page = link.object %}
{% assign have_image = false %}

{% comment %}
Does the page contain an image? If so, let's use it.
{% endcomment %}

{% if linked_page.content contains '<img' %}

{% assign have_image = true %}
{% assign src=linked_page.content | split: 'src="' %}
{% assign src=src[1] | split: '"' | first %}
{% capture image_suffix %}_{{ image_size }}.{% endcapture %}
{% assign src=src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}

{% comment %}
If the page contains no image, and that page features collections, let's grab the image of the first
collection on it.
{% endcomment %}

{% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}

{% assign have_image = true %}
{% assign collection = linklists[linked_page.handle].links.first.object %}

{% if collection.image %}
{% assign src=collection | img_url: image_size %}
{% else %}
{% assign src=collection.products.first | img_url: image_size %}
{% endif %}

{% endif %}



{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% endif %}

{% endfor %}

</div>

{% if number_of_links == 0 %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list.
Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections.
</p>
</div>
</div>

{% endif %}

{% else %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty.
Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here.
Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>.
</p>
</div>
</div>

{% endif %}

<style>
kbd {
background-color: #FBFBE4;
padding: 1px 4px;
border-radius: 3px;
}
</style>Column spacing help.png

0 Likes
Shopify Partner
798 75 111

If you can share the URL to your store that would help.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Astronaut
835 95 178

Yeah we'll need to see the store. Post the url and password if it's password protected. What you gave us is only the liquid and html, spacing is generally a CSS issue. If you arent comfortable posting it here you can send me a direct message, but you will have to enable messaging in your profile.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

Store Page is "enpointeballet.net"

0 Likes
Highlighted
Astronaut
835 95 178

How did you create the page? There is a page-width container that the content of your page is outside of. I don't know how your page.liquid is set up though or how you created this page. Did you just use the editor after you create a page in Online Store > Pages > Add Page?

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
5 0 0

page was made by using this tutorial for a page with specific collections instead of all collections.

https://help.shopify.com/en/themes/customization/collections/featuring-collections-using-link-lists

0 Likes