如何制作不同屏幕尺寸的响应式同位素图库插件？

问题描述

我想使以下同位素库对所有不同的屏幕尺寸都具有响应性。每当我想在较小尺寸的窗口（320px，576px，768px）中看到它时，总会有间隙。我该怎么解决？

我的网站链接：Website

谢谢。

$('.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文件。

解决方法

同位素画廊似乎一直都在占据94％的位置。您可以尝试给父容器3％的保证金。所以画廊

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

将排在中心。