Streaming live at 10am (PST)

Masonry and Js Jquery Bug

I have big problem with masonry js beacause i would like to hide/appear my gallery
but it’s actually impossible because i must to use the basic code html masonry

indent preformatted text by 4 spaces
              <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

I tried Jquery code and Js code vanilla describe on the masonry web site but it’s not working
at all, it doesnt interact with blocs. I trying everything to resolve the problem but it’s still not working. I work with wamp which works perfectly so its not a problem about serveur.

Here is the html code :

               <!DOCTYPE html>

                  <meta charset="utf-8">
                     <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="description" content="">
                      <link rel="stylesheet" href="main.css">

                     <script src="masonry.pkgd.js"> </script>

             <script src=""></script>
                           / / options
                         itemSelector: '.grid-item',
                         columnWidth: 200



                    <div id="test">
                     <p> 3dTESTLOL </p>

                            <div class="grid">

             <div class="grid-item grid-item--portrait">   <img src="img/img1%20.jpg">  </div>
             <div class="grid-item grid-item--rectangle">  <img src="img/img2.jpg">  </div>
             <div class="grid-item grid-item--portrait">   <img src="img/img3.jpg"> </div>
         <div class="grid-item grid-item--carre">   <img src="img/img4.jpg">  </div>
         <div class="grid-item grid-item--portrait">    <img src="img/img5.jpg">  </div>
           <div class="grid-item grid-item--rectangle2">      <img src="img/img6.jpg">  </div>  
          <div class="grid-item grid-item--portrait">     <img src="img/img7.jpg"> </div>
           <div class="grid-item grid-item--carre">    <img src="img/img8.gif">  </div>
         <div class="grid-item grid-item--rectangle3">   <img src="img/img9.jpg"> </div> 

          <div class="grid-item grid-item--carre5">     <img src="img/img10.jpg">   </div>
         <div class="grid-item grid-item--carre2">   </div>
                  <div class="grid-item grid-item--rectangle4">   <img src="img/img12.jpg">   </div> 
             <div class="grid-item grid-item--rectangle5">   <img src="img/img13.jpg"> </div> 
           <div class="grid-item grid-item--carre4"> <img src="img/img15.jpg">   </div>
             <div class="grid-item grid-item--carre8">   <img src="img/img16.jpg">   </div>
             <div class="grid-item grid-item--rectangle6">  <img src="img/img17.jpg">    </div> 


body {

background: black;


#test {

margin-top : 25%;



margin-top : 40%;


.grid {
background: #black;
max-width: 1635px;

margin: 0 auto;  


.grid:after {
content: ‘’;
display: block;
clear: both;

.grid-item {

margin-bottom: 10px;
margin-left: 10px;

width: 760px;
height: 600px;
background: #D26;


background-color: rose;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;


.grid-item–portrait { width: 420px; height: :600px }
.grid-item–rectangle { width: 760px; height: 600px }
.grid-item–carre { width: 420px; height: 420px }
.grid-item–rectangle2 { width: 760px; height: 420px }
.grid-item–rectangle3 { width: 760px; height: 720px }
.grid-item–carre2 { width: 420px; height: 670px }
.grid-item–rectangle4 { width: 760px; height: 550px }
.grid-item–rectangle5 { width: 785px; height: 550px }
.grid-item–carre3 { width: 325px; height: 500px }
.grid-item–carre4 { width: 450px; height: 650px }
.grid-item–carre5 { width: 420px; height: 670px }
.grid-item–carre8 { width: 370px; height: 420px }

.grid-item–rectangle6 { width: 785px; height: 650px }

.grid-item:hover {
background: #A2C;
border-color: white;
cursor: pointer;

Thank a lot for your answer !
And sorry for my english

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


Since this is a custom code issue could can you move this post to that? This is not a webflow bug.

If you don’t share your published site URL and share the Read Only Preview it will be very hard to help.

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