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.

closed #3

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