Issue with Masonry layout: all items are appearing in one single column on the left side

I am currently working on a project using Bootstrap 4.

On one of the pages, I am attempting to create a masonry layout with images. Most of the images have a certain width, while some have double that width.

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  font-size: 14px;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline,
a.nounderlie:hover {
  text-decoration: none;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav li {
  padding: 0 4px;
}
.navbar-nav li a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  text-transform: lowercase;
}
.navbar-nav li.active a {
  text-decoration: underline;
}
.navbar-nav.black-text a {
  color: #000;
}
.masonry-layout {
  margin-top: 5rem;
}
.masonry-layout img {
  display: block;
  margin: 0 auto;
}
.masonry-layout .grid-item:nth-child(odd) {
  float: right;
}
.site-footer {
  color: #7E7E7E;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2beacb0b1ada6f2b3bea6b0aaab9febf1edf1ee">[email protected]</a>/dist/masonry.pkgd.min.js"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-default">
  <a class="navbar-brand white" href="index.html">
Logo
</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav black-text">
      <li class="nav-item">
        <a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="page-wrapper">

  <div class="container grid masonry-layout">
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
  </div>

The smaller images are all in the right column, possibly due to the bootstrap columns being floated left. To address this, I added float: right; to every odd item.

However, this adjustment did not produce the desired outcome. Can you point out where I might be going wrong?

cssbootstrap-4masonry

Answer №1

When working with Masonry, it's important to specify the column width so that items are placed correctly. To do this, simply insert an empty div at the top of the items with the class .div-sizer.

<div class="div-sizer col-xs-12 col-sm-6"></div>

If you need help, you can check out the codepen created by the developer of the library for reference.

Answer №2

Make sure to always place columns within a .row element and remove the columnWidth: 200 setting. Also, set the images to have a width of 100% to prevent them from overflowing their container.

$('.row').masonry({
  itemSelector: '.grid-item'
});
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  font-size: 14px;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline,
a.nounderlie:hover {
  text-decoration: none;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav li {
  padding: 0 4px;
}
.navbar-nav li a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  text-transform: lowercase;
}
.navbar-nav li.active a {
  text-decoration: underline;
}
.navbar-nav.black-text a {
  color: #000;
}
.masonry-layout {
  margin-top: 5rem;
}
.masonry-layout img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.site-footer {
  color: #7E7E7E;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28f83918d8c909bcf8e839b8d9796a2d6ccd0ccd3">[email protected]</a>/dist/masonry.pkgd.min.js"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-default">
  <a class="navbar-brand white" href="index.html">
Logo
</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav black-text">
      <li class="nav-item">
        <a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="page-wrapper">

  <div class="container grid masonry-layout">
 <div class="row">
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
  </div>

  <footer class="site-footer container-fluid clearfix">
    <div class="row">
      <div class="col-md-6">
        <p class="text-center text-md-left">Toate drepturile rezervate | Propaganda | 2018</p>
      </div>
      <div class="col-md-6">
        <p class="text-center text-md-right">Ne gasesti si pe <a href="#">Facebook</a> si <a href="#">Youtube</a></p>
      </div>
    </div>
  </footer>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with linking CSS file to EJS file in Express.js

After carefully reviewing the setup of my folders and code structure, I am confident that I have correctly linked the CSS to the EJS file. Despite this, I am still facing issues as it is not working properly. To provide a visual reference, I have include ...

javascriptcssnode.jsexpressejs

Tips for adjusting Bootstrap's sub drop-down menu to the opposite side when hovering with the mouse

I'm working on a menu that has a dropdown feature, and here is a snippet of the code: <li class="nav-item flyout"> <a href="#" class="nav-link dropdown-toggle nav_sp_clr {{#ifpage 'quicklink'}}active{{/ifpage}}">Quick Links ...

htmlcssbootstrap-4

How can I convert a PHP class into inline CSS styles?

While exploring MailChimp's css inliner at , I found myself curious if there are any available classes that can achieve the same result. It would be convenient to have this functionality directly in my email code without relying on MailChimp. I am es ...

phpcssemailinline-styles

Including tabs from a different HTML page within a tab on my own HTML page - enhancing the user interface of a web application

I am currently developing a web application with 4 tabs. Each tab includes a side menu (created using jQuery) and the rest of the space is divided into two sections: top div and bottom div (a table with two columns - column 1 contains the side menu, and co ...

javascriptjqueryhtmlcsstabs

The gulp-sass import feature has been acting up quietly

I'm currently attempting to transpile a scss file using gulp-scss. However, when I execute the task, it seems that the imports are not being recognized. gulpfile.js gulp.src('./app/css/app.scss', {base: './'}) .pipe(sass({inc ...

cssimportsassgulp

Replace the pixel measurements with percentage values

I have a vision for creating a dynamic full-width slider using a flex-wrapper and multiple child sections. Each section spans the width of the viewport and is aligned in a row. The goal is to move the flex-wrapper by 100% margin-left every time a button ...

jquerycss

The bootstrap navbar-collapse feature is causing a shift in the orientation of the navigation elements

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar navbar-default" role="nav ...

jqueryhtmlcsstwitter-bootstrap

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

htmlcsstwitter-bootstrap

Bootstrap 4 collapse-accordion malfunctioning even with correct syntax

My accordion was functioning properly with earlier versions of Bootstrap 4. However, after testing my site, I discovered that all my accordions are no longer working, despite having valid HTML markup. You can see the issue here: After spending 3 days tryi ...

bootstrap-4bootstrap-accordion

Update the CSS module in React dynamically

I have a canvas within my Component When the cursor enters the Canvas, I want it to change to the crosshair style. import styles from '../css/basic-styles.module.css'; const ImagePreview = () =>{ [mode,setMode] = useState(0); changeM ...

cssreactjs

Verify that the web element has a class containing the pseudo selector (:first-child) applied using Selenium WebDriver

Whenever I have a css style that uses the pseudo selector first-child: .point:first-child { margin-left: 0; } Could one find out if a specific DOM element has the class point with the :first-child pseudo-selector applied? .getAttribute("class") isn&a ...

cssselenium

How to center align a 'list group item' within a Card in Bootstrap 4 Alpha 6?

Is there a way to align the 'list-group-item' within the latest Bootstrap 4 Alpha 6 update? I tried adding text-center to the card itself, which centers the card header and links, but the list group remains in place. I also attempted to use the ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

Can someone assist me in displaying 6 images retrieved from a MySQL database on an MVC Razor view? Images 1 and 6 should be placed in separate divs labeled "item", while images 2, 3, 4, and 5 should be grouped together in a div called "item-small". Below i ...

javascriptjquerycssasp.net-mvc-4razor

The header of my website requires adjustment to correct the horizontal line at the top

I am having an issue with a horizontal line separating my header from the body content. I want it to stay in place when scrolling, but when I try to set it to a 'fixed' position, it behaves strangely. Can someone please assist me with this proble ...

csshtml

css grids adapt their layout based on the dimensions of the webpage

My main page currently consists of a menu, sidebar, and main window. However, when I redirect to another page, I want the sidebar to disappear. Is it possible to achieve this using CSS grids without the need for two separate CSS files? For instance, here ...

css

Incorporating a splash of color while changing the background color on scroll

Is it possible to include more colors between the "beginning-color" and the "ending-color" in this code that changes the background color on scroll? example $(document).ready(function(){ var scroll_pos = 0; var animation_begin_pos = 0; ...

jquerycsscolorsbackground

Is your webpage displaying unnecessary white space on smaller screens?

https://i.sstatic.net/t7Hyj.png .main { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; min-width: 100%; width: 100%; overflow-x: hidde ...

htmlcssreactjsnext.js

Shifting slightly to the left, text in Bootstrap 4 adjusts when an image is positioned to the right

Trying to achieve perfect alignment, but encountering an issue where adding an image to the last element in the row causes it to shift to the left. See examples below: Image added to the last element in the row Image not added to the last element in the ...

htmlcsstwitter-bootstrapreactjsbootstrap-4

Is it possible to resize an inline SVG element without modifying the <svg> tag?

Utilizing a Ruby gem known as rqrcode, I am able to create a QR code in SVG format and send it as an API response. Within my frontend (Vue.js), I am faced with the task of displaying the SVG at a specific size. Currently, my code appears as follows, rende ...

cssvue.jssvg

How do I utilize the Material-UI slider's activated (CSS API) feature to conceal the shadows?

Can someone please explain to me how I can use the activated class to change the style of the thumb and hide its shadows? According to the official website, the activated class is applied to the track and thumb elements to trigger JSS nested styles when a ...

cssreactjsmaterial-ui