Getting Masonry images/gallery to display properly on webpage

HTML & CSS
1

Hey everyone,

So I am having some difficulty understanding why when I create a demo page for a masonry photo gallery displays perfectly, yet when I use the same code for the file it needs to go in, there’s spacing all around the images and makes it look like crap.

Here is the HTML code for the page where everything is displaying correctly:

<!DOCTYPE html>
  <html>
    <head>
      <title></title>
      <link rel="stylesheet" href="css/bootstrap.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
      <h1>Masonry Gallery</h1>
      <section id="photos">
	<img src='http://placekitten.com/300/276' alt=''>
        <img src='http://placekitten.com/300/333' alt=''>
        <img src='http://placekitten.com/300/358' alt=''>
        <img src='http://placekitten.com/300/261' alt=''>
        <img src='http://placekitten.com/300/299' alt=''>
        <img src='http://placekitten.com/300/359' alt=''>
        <img src='http://placekitten.com/300/309' alt=''>
        <img src='http://placekitten.com/300/252' alt=''>
        <img src='http://placekitten.com/300/371' alt=''>
        <img src='http://placekitten.com/300/303' alt=''>
        <img src='http://placekitten.com/300/399' alt=''>
        <img src='http://placekitten.com/300/229' alt=''>
        <img src='http://placekitten.com/300/322' alt=''>
        <img src='http://placekitten.com/300/365' alt=''>
        <img src='http://placekitten.com/300/345' alt=''>
        <img src='http://placekitten.com/300/342' alt=''>
        <img src='http://placekitten.com/300/283' alt=''>
        <img src='http://placekitten.com/300/319' alt=''>
        <img src='http://placekitten.com/300/398' alt=''>
        <img src='http://placekitten.com/300/227' alt=''>
        <img src='http://placekitten.com/300/235' alt=''>
        <img src='http://placekitten.com/300/318' alt=''>
        <img src='http://placekitten.com/300/297' alt=''>
        <img src='http://placekitten.com/300/230' alt=''>
        <img src='http://placekitten.com/300/261' alt=''>
        <img src='http://placekitten.com/300/304' alt=''>
        <img src='http://placekitten.com/300/365' alt=''>
        <img src='http://placekitten.com/300/294' alt=''>
        <img src='http://placekitten.com/300/331' alt=''>
        <img src='http://placekitten.com/300/208' alt=''>	
      </section>
    </body>
  </html>

Here is the CSS that ties along with this page (that works correctly)

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

and here is the file I’m trying to use this code with (HTML):

<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/includes/header.php"); ?>
<?php

try {
    $pdo = DB::getConnection();
 
    $sql = 'SELECT * FROM pages WHERE id = 1';
 
    $q = $pdo->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Could not connect to the database $dbname :" . $e->getMessage());
}
?>
            <div id="main">
            <div class="pages">
                <?php while ($row = $q->fetch()): ?>
                <h1><?php echo $row['title'];?></h1>
                <p><?php echo $row['body']; ?></p>
                <?php endwhile; ?>
                <!-- masonry gallery goes here -->
                        <div id="photos">
                        <img src='http://placekitten.com/300/276' alt=''>
                        <img src='http://placekitten.com/300/333' alt=''>
                        <img src='http://placekitten.com/300/358' alt=''>
                        <img src='http://placekitten.com/300/261' alt=''>
                        <img src='http://placekitten.com/300/299' alt=''>
                        <img src='http://placekitten.com/300/359' alt=''>
                        <img src='http://placekitten.com/300/309' alt=''>
                        <img src='http://placekitten.com/300/252' alt=''>
                        <img src='http://placekitten.com/300/371' alt=''>
                        <img src='http://placekitten.com/300/303' alt=''>
                        <img src='http://placekitten.com/300/399' alt=''>
                        <img src='http://placekitten.com/300/229' alt=''>
                        <img src='http://placekitten.com/300/322' alt=''>
                        <img src='http://placekitten.com/300/365' alt=''>
                        <img src='http://placekitten.com/300/345' alt=''>
                        <img src='http://placekitten.com/300/342' alt=''>
                        <img src='http://placekitten.com/300/283' alt=''>
                        <img src='http://placekitten.com/300/319' alt=''>
                        <img src='http://placekitten.com/300/398' alt=''>
                        <img src='http://placekitten.com/300/227' alt=''>
                        <img src='http://placekitten.com/300/235' alt=''>
                        <img src='http://placekitten.com/300/318' alt=''>
                        <img src='http://placekitten.com/300/297' alt=''>
                        <img src='http://placekitten.com/300/230' alt=''>
                        <img src='http://placekitten.com/300/261' alt=''>
                        <img src='http://placekitten.com/300/304' alt=''>
                        <img src='http://placekitten.com/300/365' alt=''>
                        <img src='http://placekitten.com/300/294' alt=''>
                        <img src='http://placekitten.com/300/331' alt=''>
                        <img src='http://placekitten.com/300/208' alt=''>	
                    </div>  
            </div>
            </div>
<?php require_once(__DIR__."/includes/footer.php"); ?>

and here is the CSS to go along with the (not working) HTML file:

* {
  box-sizing: border-box;
  }

/* force scrollbar */
html {
  overflow-y: scroll;
  }


body{
    background-color: #f8f8f8;
}

/* top/slide down nav section */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay li a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay li a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* Masonry gallery */
* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
   margin: 0;
   padding: 0;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

1365×651 879 KB

The image above where there are no gaps around the images is what I want to accomplish. Any help or advice would be greatly appreciated. I’m sort of new to masonry stuff. Thanks!

2

Hi,

Thanks for posting all the relevant code but I feel this is something that we will only be able to debug on a live version to see what’s going on.

At the minimum we need a working demo showing the problem because even if I concatenated all those files together I’m sure it would not show the problem you were having.

Do you have a live link to the page or can you set up a codepen or similar?

If the issue is that there are simply gaps around the image it could be something as simple as the images not being display:block but it could also be loads of other things impossible to guess:)

3

Recreating it in Codepen, there does not appear to be any gaps between the photos.

1 Like
4

Off topic tip:
You can do away with all those queries by using the shorthand for css columns.

columns: 5 250px;

5 being the max number of columns and 250px the min width of a column before the number is reduced.

1 Like
5

Yes as I suspected :slight_smile:

There must be something else influencing the layout. Maybe some other css cascading from other sources along the way.?

Can you do a ‘view source’ and post the actual rendered html result that your php code gives please.

Also an image of what the page looks like with gaps would also be helpful.

4 Likes
6

Thanks for all the comments! I actually fixed the problem. I didn’t realize I had both an inline style and an external file that had conflicting styles that caused the images to react like that. It works perfectly now. Thank you!

2 Likes
7

In-line styles are best avoided. :mask:

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.