CODEWITHSUNDEEP
javascriptjqueryhtmlcssmasonry
Felix
Felix

Reputation: 2661

Masonry's responsive layout has large gutters on wider page sizes

I've got an image gallery style section on my website. I'm using Masonry for the image layout. For the most part, it looks good.

enter image description here

However, when expanding the page to a larger resolutions, the gutter between the first 2 columns will sometimes widen as well.

Like so:

enter image description here

This is not what I want. Ideally I'd want small margins between images at all times, something like a pinterest layout. Help?

Relevant code is as follows:

js:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer',
  gutter: 5,
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});

css:

.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid-sizer,
.grid-item {
  width: calc(33.3333% - 5px);
}
.grid-item {
  float: left;
  margin-bottom: 5px;
}
.grid-item img {
  display: block;
  max-width: 100%;
}
.grid-item:hover img {
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;    
}

HTML/Blade (using laravel)

<h3>Latest uploads</h3>
@if (count($images) == 0)
<p>This artist does not have any images currently uploaded.</p> 
@else
<div class="grid">
  <div class="grid-sizer"></div>
  @foreach ($images as $image)  
  <div class="grid-item featuredTextContainer"">
    <a href="{{ route('image.get', ['username' => $user->username, 'URLtitle' => $image->url_title]) }}"><img src="{{ url($image->medium_path) }}"></a>
    <span class="featuredArtistName">{{ $image->title }}</span>
  </div>
 @endforeach
</div>
@endif

Upvotes: 0

Views: 153

Answers (1)

hungerstar
hungerstar

Reputation: 21725

It looks like your images have reached their native resolution and are no longer expanding to fit the cells. I'm guessing you have some CSS to make them responsive, something like max-width: 100%;. In the case of max-width: 100%; we're saying the image can take up to but not more space than its container will allow. If the image has a larger width than the parent, the image is scaled down. If the image has a smaller width than the parent, the image is left alone as it's no longer greater than or equal to the parent's width.

Either up the size of your source images or allow them to expand beyond their native size (pixelation will occur).

My answers do not include/use Masonry as I do not see this as a Masonry issue but rather a CSS and image implementation issue.

Example of what I believe is happening in your situation.

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}
<div class="container">
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
</div>

Example 1 Fix - Allow Image to expand beyond native size

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  /* max-width: 100%; */
  width: 100%;
  height: auto;
}
<div class="container">
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
  <div>
    <img src="http://placehold.it/300x500/ccc">
  </div>
</div>

Example 2 Fix - Larger Images

.container {
  width: 80%;
  margin: 25px auto;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  float: left;
  border: 1px solid #c00;
  overflow: hidden; /* clearfix */
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}
<div class="container">
  <div>
    <img src="http://placehold.it/1200x2000/ccc">
  </div>
  <div>
    <img src="http://placehold.it/1200x2000/ccc">
  </div>
</div>

Upvotes: 3

Related Questions