Why is my custom testimonial slider CSS code not working properly on Shopify?

[Le-Million]

i have a custom code for testimonial slider section in shopify but it doesn’t seem to work properly,

Here’s the code:

{{ ‘swiper-bundle.min.css’ | asset_url | stylesheet_tag }}
{{ ‘swiper-bundle.min.js’ | asset_url | script_tag }}

{{ section.settings.heading }}

{% for block in section.blocks %}

{{ block.settings['slide-text'] }}

{{ block.settings.desc }}

{% endfor %}

* { margin: 0; padding: 0; box-sizing: border-box; } /* Add some basic styles for the Swiper container */ .swiper-container { width: 100%; margin: 0 auto; padding: 50px 5px; } .swiper-pagination { position: relative !important; margin-top: 20px; } .testimonial-box { width: 400px; padding: 17px 25px; border-radius: 10px; display: flex; align-items: center; justify-content: space-evenly; gap: 20px; } .testimonial-heading-text { font-size: {{ section.settings.heading-font-size }}px; color: {{ section.settings.heading-font-color }}; font-weight: {{ section.settings.weight }}; } .testimonial-text .heading-inner { font-size: 25px; } .testimonial-main { display: flex; justify-content: center; align-items: center; gap: 20px; } .testimonial-box img { width: 100px; height: 100px; } .testimonial-text { display: flex; flex-direction: column; justify-content: center; align-items: start; } .swiper-slide { margin: 10px; } .testimonial-container { display: flex; justify-content: center; align-items: center; width: auto; gap: 20px; padding: 30px 40px; margin: auto; overflow:hidden; flex-direction: column; background-color: {{ section.settings.main-bg-color }} } @media only screen and (max-width: 768px) { .testimonial-box { width: 100% !important; } .testimonial-main { flex-direction: column; } .swiper-wrapper { width: 100%; overflow: hidden; } .swiper-container { width: 100%; } .swiper-slide { /* width: auto !important; /* Adjust the slide width as needed */ */ margin: 10px; display:flex; justify-content: center; align-items: center; } /* Style adjustments for smaller screens (e.g., mobile) */ @media screen and (max-width: 768px) { .swiper-container { width: 100%; /* Full width on smaller screens */ } .swiper-slide { width: 100% !important; /* Adjust slide width for mobile */ } }

{% schema %}
{
“name”: “Testimonial Slider”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Enter slider heading here”
},

{
“type”: “color”,
“id”: “heading-font-color”,
“label”: “Heading Font Color”
},

{
“type”: “color”,
“id”: “main-bg-color”,
“label”: “Background Color”
},

{
“type”: “range”,
“id”: “heading-font-size”,
“label”: “Heading font size”,
“max”: 50,
“min”: 10,
“default”: 20
},

{
“type”: “select”,
“id”: “weight”,
“label”: “Font Weight”,
“options”: [
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “bold”,
“label”: “Bold”
},
{
“value”: “bolder”,
“label”: “Bolder”
}
],
“default”: “normal”
}
],

“blocks”: [
{
“name”: “Slide”,
“type”: “slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Testimonial image”
},

{
“type”: “color”,
“id”: “rahulcolor”,
“label”: “Heading Font Color”
},

{
“type”: “color”,
“id”: “desc-color”,
“label”: “Description Color”
},

{
“type”: “color”,
“id”: “box-bg-color”,
“label”: “Slide bg color”
},

{
“type”: “text”,
“id”: “slide-text”,
“label”: “Enter Heading”,
“default”: “Your heading”
},

{
“type”: “textarea”,
“id”: “desc”,
“label”: “Enter your description here”
},

{
“type”: “range”,
“id”: “slide-heading-font-size”,
“label”: “Slide Heading font size”,
“max”: 50,
“min”: 10,
“default”: 20
},

{
“type”: “select”,
“id”: “slide-font-weight”,
“label”: “Font Weight”,
“options”: [
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “bold”,
“label”: “Bold”
},
{
“value”: “bolder”,
“label”: “Bolder”
}
],
“default”: “normal”
},

{
“type”: “range”,
“id”: “desc-size”,
“label”: “Description size”,
“max”: 50,
“min”: 10,
“default”: 15
}
]
}
],

“presets”: [
{
“name”: “testimonial slider”,
“category”: “custom”
}
]
}
{% endschema %}

if anyone’s could resolve it for me would be really appreciated and the testimonial slider would be really useful for me and for the shopify community also

Here’s how it showing in Shopify: