1

I'm working on a section of a website with a group of 8 images arranged using CSS masonry. It looks how I want with the exception of the width - I want the images to stretch out across the screen. I've checked the console and there seems to be a margin set for the .wrapper container but I can't seem to remove it. I want everything else as is - the RWD is also set as I want it. Here's the code - 

.brick h2 {

  position: absolute;
  top: 50%;
  left: 45%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 25px;
  
}


/* Partners page */



.masonry { /* Masonry container */
    column-count: 4;
   
}


.brick img {
 width: 100%;
 height: 100%;
}

body {
    
    font-family: 'Gotham-Light';
    margin: 0;
    background: #fff;
}

.wrapper {
    width: auto;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
    vertical-align: bottom;
}

.brick {
   display: inline-block;
    margin: 0 0 1em;
    width: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


/* Image words / text hover effect */ 

 .brick {
  
  opacity: .99;
  position: relative;

  
}

.brick:before {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

  opacity: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}


 .brick img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}



 .brick .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.brick .details span {
  /* display: block; */
  opacity: 0;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

 .brick .details #title {
  line-height: 1.5;
  font-weight: 500;
  font-size: 18px;
}

 .brick .details #info {
  line-height: 1.2;
  font-weight: 500;
  font-size: 10px;
}

.brick:focus:before,
  .brick:focus span, .brick:hover:before,
 .brick:hover span {
  opacity: 1;
}
 .brick:focus:before, .brick:hover:before {
  top: 50%;
}

 .brick:focus span, .brick:hover span {
  top: 0;
}
 .brick:focus #title, .brick:hover #title {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
 .brick:focus #info, .brick:hover #info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

/* -------------------------   */



/* RWD for masonry partner templates */

@media only screen and (min-width: 320px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}
<body>

          <div class="wrapper">
            <h1><span style="color: rgb(133,52,146);">&#43;</span>What we do</h1>
                <div class="masonry">
                            <div class="brick">
                                <h2>ADVERTISING</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">  
                                <h2>GRAPHIC DESIGN</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>
                            <div class="brick">  
                                <h2>BRAND IDENTITY</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>
                            <div class="brick">      
                                <h2>BRAND GUIDELINES</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">
                                <h2>PRINT MANAGEMENT</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">  
                                <h2>CREATIVE DIRECTION</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                   <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>
                            <div class="brick">
                                <h2>EDITORIAL DESIGN</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">
                                <h2>AND LOTS OF OTHER STUFF</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                             
                      
                </div>
         </div>         

</body>

On my screen it looks like this (not sure why image shapes aren't forming in the snippet). However, my main concern is getting the images to stretch across the screen further than they do at present -

Masonry

Any assistance would be appreciated.

Mike.Whitehead
  • 798
  • 18
  • 52
  • 1
    Possible duplicate of [CSS columns bug — 5 column count only showing 4 (with images)](https://stackoverflow.com/questions/9302755/css-columns-bug-5-column-count-only-showing-4-with-images) – sol Oct 05 '17 at 11:24

2 Answers2

0

Solved it. It was this rule that was blocking things - 

 @media only screen and (min-width: 1600px) {
    .wrapper {
        width: 1560px;
    }
}

And I also amended the column count on this rule from 5 to 4 - 

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }




}
Mike.Whitehead
  • 798
  • 18
  • 52
0

I have updated your code. Did minor changes. Remove inline-block from the brick. And added 2 more so that the columns can show even items. 

.brick h2 {
  position: absolute;
  top: 50%;
  left: 45%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 25px;
}


/* Partners page */

.masonry {
  /* Masonry container */
  column-count: 4;
}

.brick img {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Gotham-Light';
  margin: 0;
  background: #fff;
}

.wrapper {
  width: auto;
  margin: 3em auto;
  background: red;
  /*just for demo*/
}

.masonry {
  margin: 1.5em 0;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: .85em;
  vertical-align: bottom;
}

.brick {
  margin: 0 0 1em;
  width: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/* Image words / text hover effect */

.brick {
  opacity: .99;
  position: relative;
}

.brick:before {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.brick img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.brick .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.brick .details span {
  /* display: block; */
  opacity: 0;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.brick .details #title {
  line-height: 1.5;
  font-weight: 500;
  font-size: 18px;
}

.brick .details #info {
  line-height: 1.2;
  font-weight: 500;
  font-size: 10px;
}

.brick:focus:before,
.brick:focus span,
.brick:hover:before,
.brick:hover span {
  opacity: 1;
}

.brick:focus:before,
.brick:hover:before {
  top: 50%;
}

.brick:focus span,
.brick:hover span {
  top: 0;
}

.brick:focus #title,
.brick:hover #title {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.brick:focus #info,
.brick:hover #info {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}


/* -------------------------   */


/* RWD for masonry partner templates */

@media only screen and (min-width: 320px) {
  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 400px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .masonry {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

@media only screen and (min-width: 1280px) {
  .wrapper {
    width: 1260px;
  }
}
<body>

  <div class="wrapper">
    <h1><span style="color: rgb(133,52,146);">&#43;</span>What we do</h1>
    <div class="masonry">
      <div class="brick">
        <h2>ADVERTISING</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>ADVERTISING</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>ADVERTISING</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>GRAPHIC DESIGN</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>BRAND IDENTITY</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>BRAND GUIDELINES</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>PRINT MANAGEMENT</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>CREATIVE DIRECTION</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>EDITORIAL DESIGN</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>AND LOTS OF OTHER STUFF</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>


    </div>
  </div>

</body>
Aslam
  • 9,204
  • 4
  • 35
  • 51