The slider looks fine on desktop view but it does not resize properly. I just want it to resize on tablet and mobile for responsiveness. Keep it still 3 pictures in main view. I tried a few media queries but they did not work for me as the slider images/slider itself keeps to the same size. Thank you for your help in advance! {% comment %} -------CSS------- {% endcomment %} <link rel="stylesheet" type="text/css" href="{{ 'slick.css' | asset_url }}"/> {% comment %} -------HTML------- {% endcomment %} <div class="spacer" style="height: 80px; width: 100%;"> </div> <div class="custom-text-area"> <h1 style="font-family: eurostile-extended, sans-serif; font-weight: 500; text-transform: uppercase;">Legacy Edition</h1> </div> <div class="carousel-wrap" style="margin-top: 30px; margin-bottom: 30px;"> <div class="band-accessory-routing_band-accessory-routing__slider--opacity__80oPN" style="display: block !important;"></div> <div class="slider center blue"> <div class="image-x"> <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/purple-1.png?v=1725491685" style="opacity: 1;"></a> </div> <div class="image-x"> <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/orange-1.png?v=1725491685" style="opacity: 1;"></a> </div> <div class="image-x"> <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/pink-1.png?v=1725491685" style="opacity: 1;"></a> </div> <div class="image-x"> <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/purple-1.png?v=1725491685" style="opacity: 1;"></a> </div> <div class="image-x"> <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/orange-1.png?v=1725491685" style="opacity: 1;"></a> </div> <div class="image-x"> <a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/pink-1.png?v=1725491685" style="opacity: 1;"></a> </div> </div> </div> <div class="custom-button-area" style="padding: 30px 0 20px;"> <a href="/collections/all" class="btn-link">Shop All</a> </div> <div class="spacer" style="height: 100px; width: 100%;"> </div> {% comment %} -------JS------- {% endcomment %} <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="{{ 'slick.min.js' | asset_url }}"></script> <script> $(document).ready(function(){ $('.slider').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, arrows: true, // Ensure arrows are enabled responsive: [ { breakpoint: 768, settings: { arrows: true, // Ensure arrows are enabled centerMode: true, centerPadding: '40px', slidesToShow: 3, } }, { breakpoint: 480, settings: { arrows: true, // Ensure arrows are enabled centerMode: true, centerPadding: '40px', slidesToShow: 1, } } ] }); $('a[data-slide]').click(function(e) { e.preventDefault(); var slideno = $(this).data('slide'); $('.slider').slick('slickGoTo', slideno - 1); }); }); </script> {% comment %} -------CSS------- {% endcomment %} {% stylesheet %} .custom-button-area { padding: 30px 0 20px; text-align: center; } .btn-link { display: inline-block; padding: 12px 24px; background-color: #ffffff; color: #000000; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; font-family: "eurostile-extended", sans-serif; font-weight: 500; text-transform: uppercase; border: 1px solid #000000; } .btn-link:hover { background-color: #11322c; transform: scale(1.05); color: #ffffff; } .btn-link:active { background-color: #11322c; transform: scale(1); } .slider .image-x img { width: 100% !important; height: auto; } {% endstylesheet %} {% comment %} /* -------SECTION CREATE------- */ {% endcomment %} {% schema %} { "name": "Custom JS Slider Home", "settings": [], "presets": [{"name": "Custom JS Slider Home"}] } {% endschema %}