i want to edit custom collection liqiuid code

[Manishuk01]

i want to create the same collection section as refrence on liquid code to add section. i ask chat gpt for code the given below the image

i want 12 collection section in a row on my pc view i want all  12 collection and mobile view i want 4 collection with slider 

my website link - https://g8tiyz-ui.myshopify.com/

refrence website link - https://www.posterized.in

 

{% schema %}
{
  "name": "Custom Collections",
  "settings": [],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Choose Collection"
        },
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "Custom Image"
        },
        {
          "type": "url",
          "id": "custom_url",
          "label": "Custom URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Collections"
    }
  ]
}
{% endschema %}

<div class="custom-collections-section">
  <h2 class="text-center text-2xl font-bold mb-6">Shop by Collection</h2>

  <div class="collections-container">
    {% for block in section.blocks %}
      {% if block.settings.collection != blank %}
        <div class="collection-item">
          <a href="{{ block.settings.custom_url | default: block.settings.collection.url }}">
            {% if block.settings.custom_image != blank %}
              <img src="{{ block.settings.custom_image | image_url }}" 
                   alt="{{ block.settings.collection.title }}" 
                   class="collection-image">
            {% elsif block.settings.collection.image != blank %}
              <img src="{{ block.settings.collection.image | image_url }}" 
                   alt="{{ block.settings.collection.title }}" 
                   class="collection-image">
            {% else %}
              <img src="{{ 'placeholder-image.jpg' | asset_url }}" 
                   alt="Placeholder" 
                   class="collection-image">
            {% endif %}
            <p class="collection-title">{{ block.settings.collection.title }}</p>
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<style>
  .custom-collections-section {
    padding: 40px 20px;
    background-color: #FFFFFF;
  }

  /* Desktop View: 12 columns */
  .collections-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 collections in one row */
    gap: 1px;
    justify-content: top;
    align-items: top;
    max-width: 100%;
    overflow: hidden;
  }

  .collection-item {
    text-align: center;
  }

  .collection-image {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    margin: 0 auto
    background-color: #FFFFFF;
    padding: 8px;
  
  }

  .collection-title {
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }

  /* Mobile View: 4 columns */
  @media (max-width: 768px) {
    .collections-container {
      grid-template-columns: repeat(4, 1fr); /* 4 collections in one row */
      gap: 10px;
      padding: 0 10px;
    }

    .collection-item {
      text-align: center;
    }

    .collection-image {
      width: 70px;
      height: 70px;
    }

    .collection-title {
      font-size: 12px;
    }
  }
</style>

[wisn_shaftler]

@media only screen and (max-width: 768px) {
    .custom-collections-section .collections-container {
        display: flex;
        flex-direction: row;
        scroll-behavior: smooth;
        overflow-x: auto;
        padding-left: 0;
        padding-right: 0;
        justify-content: space-evenly;
    }
    
    .custom-collections-section .collections-container .collection-title {
        padding: 0;
        margin: 0;
        text-decoration: none;
    }
    
    .custom-collections-section .collections-container a {
        text-decoration: none;
        line-height: 1.5;
    }
    
    .custom-collections-section {
        padding-left: 0;
        padding-right: 0;
    }
    
    .custom-collections-section h2.text-center {
        padding-left: 20px;
    }

}