Isotope grid shatters when browser window is resized

Question

Isotope grid shatters when browser window is resized

My goal is to design a 3-column grid using Twitter Bootstrap and Isotope. However, when I resize the browser to force the layout into a single column mode, Isotope fails and leaves large spaces both vertically and horizontally.

Regular Layout

Issues in Single Column

As shown in the image above, there are significant vertical gaps, and the first cell fails to expand to 100% width.

Here's the link to my Codepen.

HTML:

<html lang="en" class="">
    <head>
        <meta charset="utf-8" />
        <title>isotope</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="masonry row">
                <div class="item col-lg-4 col-md-6">
                    <div class="cell">
                        <h3>
                            <a href="#">1. One</a>
                        </h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor metus et porta facilisis. </p>
                        <p>Aenean congue lorem accumsan erat tempor, eu tempus ex tristique.</p>
                        <small class="text-muted">27 Nov 2014</small>
                        <div class="pull-right">
                            <a class="btn btn-primary btn-xs" href="#">auctor</a>
                        </div>
                    </div>
                </div>
                <!-- more items -->
            </div>
        </div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.1.1/isotope.pkgd.min.js"></script>
    </body>
</html>

CSS:

.masonry {
    padding: 0;
    margin-left: -15px;
    margin-right: -15px;
}

.item {
    margin-right: -1px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.cell {
    padding: 15px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 6px -6px #777;
    border: 1px solid #F6F6F6;
}

JavaScript:

var isotope = new Isotope('.masonry', {
  itemSelector: '.item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.item'
  }
});

isotope.layout();

Upon reloading the browser in a narrow viewport, the vertical gaps become uniform, but the first cell still lacks 100% width expansion.

Any assistance would be greatly appreciated.

css twitter-bootstrap jquery-isotope jquery-masonry

Answer 1

Answer №1

After some experimentation, I discovered that by defining the CSS below, I was able to resolve the horizontal problem:

@media (max-width: 991.9999px) {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        width: 100%
    }
}

It became clear to me that isotope/masonry required a width to be set on the .item element.

As for the vertical issue, I will work on updating my solution promptly.

Answer 2

After some experimentation, I discovered that by defining the CSS below, I was able to resolve the horizontal problem:

@media (max-width: 991.9999px) {
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        width: 100%
    }
}

It became clear to me that isotope/masonry required a width to be set on the .item element.

As for the vertical issue, I will work on updating my solution promptly.

Isotope grid shatters when browser window is resized

Regular Layout

Issues in Single Column

Answer №1

Similar questions

Troubleshooting Problem with Flexbox and Expandable/Accordion Side Menu

Establishing limits for a division using keyboard commands

How to enhance the design with a box-shadow for a :after pseudo element

`Loading CSS files in Node.js with Express``

Issue with sticky positioning not functioning properly with overlapping scrolling effect

Align select and number inputs vertically in Firefox

Content in the Bootstrap carousel vanishes without warning after a period of time

What is the best way to build a personalized discussion platform: employing tables, <ul> <li>, <dl> <dt>, or div elements?

Optimal approach for creating a CSS button with a dynamic size, gradient background and arrow design

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Please rewrite the following sentence: "I am going to the store to buy some groceries."

Problems Arising from Bootstrap Label and Input Field Alignment

Responsive design issues with Bootstrap 3 box layout

Nested div within another div, shifting position relative to scrolling (React)

Label text facing positioning difficulties

The full execution of Jquery show() does not pause until it finishes

Using WebDriver Selenium to choose an element within a table following another element

Two liquid level divs within a container with a set height

Is it advisable to set the html root at 62.5% when using rem units in CSS? Does this imply that the default font size of browsers is 16px?

Press and hold feature using CSS or JavaScript