如何制作不同屏幕尺寸的響應式同位素庫插件？

Question

我想讓以下同位素庫響應所有不同的屏幕尺寸。 每當我想在較小尺寸的窗口（320px、576px、768px）中看到它時，總會有一個間隙。 我該如何解決？

我的網站鏈接：網站

謝謝你。

 $('.i_gallery').isotope({ itemSelector: '.g_item', percentPosition: true, masonry: { columnWidth: '.g_item' } }); //filtering Click function $('.portfolio-menu ul li').click(function() { $('.portfolio-menu ul li').removeClass('active'); $(this).addClass('active'); let filterItems = $(this).attr('data-filter'); $('.i_gallery').isotope({ filter: filterItems }) return false; });

 <div class="wrapper"> <div class="portfolio-menu"> <ul> <li class="active">All</li> <li data-filter=".web">Web Design</li> <li data-filter=".logo">Logo Design</li> <li data-filter=".wordpress">WordPress</li> <li data-filter=".ecommerce">E-Commerce</li> </ul> </div> <div class="i_gallery"> <div class="g_item web"> <img src="image/10.png" alt="" class="img-fluid"> </div> <div class="g_item web"> <img src="image/11.png" alt=""> </div> <div class="g_item wordpress"> <img src="image/12.png" alt=""> </div> <div class="g_item wordpress"> <img src="image/13.png" alt=""> </div> <div class="g_item logo"> <img src="image/14.png" alt=""> </div> <div class="g_item logo"> <img src="image/15.png" alt=""> </div> <div class="g_item ecommerce"> <img src="image/16.png" alt=""> </div> <div class="g_item ecommerce"> <img src="image/17.png" alt=""> </div> </div> </div>

我附上了同位素庫的外部 Js 文件和 HTML 文件。

Answer 1

同位素庫似乎一直占據着 94%。 您可以嘗試為父容器提供 3% 的余量。 所以畫廊

 i_gallery { width: 100%; /* margin: 0 auto; */ margin: 3%; }

將來到中心。