How to create extra marigin between two collections

Hello people!

Could somebody please tell me how i can create extra margins between these two collections in the picture below?:

To create these collections together in a page i used the following code:

{% 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 %}

{% 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 %}

{% if uses_minimal_framework %}
{% cycle ‘clear-item’: ‘’, ‘’, ‘’, ‘

’ %}
{% 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’: ‘’, ‘’, ‘’, ‘

’ %}
{% endif %}

{% endif %}

{% endfor %}

{% if number_of_links == 0 %}




There are no links of type Collection in your {{ page.title }} link list.
Go ahead and edit your link list to use links that point to collections.



{% endif %}

{% else %}




You do not have a link list with a handle set to {{ page.handle }}, or you do and it’s empty.
Go ahead and create a link list called {{ page.title }} on your Navigation page 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 {{ page.handle }}.



{% endif %}


kbd {
background-color: #FBFBE4;
padding: 1px 4px;
border-radius: 3px;
}

I couldn’t find anything in the code above that could adjust this margin.

@appleparts Please provide the URL of your store and if it is password protected please share the password too. Thanks

@appleparts

Please share your store URL.

Thank you for your quick response, this is the url:

https://components-for-apple.myshopify.com/

Thank you for your quick response! This is the url:

https://components-for-apple.myshopify.com/

Password: asdf1234

@appleparts
Kindly share your store Password.
Thank You.

Thank you for your response. Password is: asdf1234.

@appleparts
Do you want this in mobile view or desktop view.
Thank You.

Desktop view!

@appleparts
Give me a link on which page you want to edit.
Thank you.

https://components-for-apple.myshopify.com/pages/categorieen

This for example.

hii, @appleparts
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
.grid__item.grid-item.product-grid-item.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.text-center:nth-child(4) {
    margin-top: 60px !important;
}
}

Thank You.

Thank you for the code and effort, much appreciated. But i haven’t managed to paste the code succesfully.

I have copied the code in theme.liquid, is this the right place? And also, i placed it on top of the existing code like you said.

This is how the front end looks when i paste code.

Could you please help me out?

Not theme.liquid

Paste the code in theme.scss