javascript - Masonry wrapper 100% width too wide on mobile -
i'm making use of masonry on site, , it's working fine, apart in mobile version, tile extending on 100% (which set in css).
has had problem before, or suggestions how fix it. work, , better, totally disable masonry in mobile version. have tried removing class on mobile, reason masonry still enabled.
js
var container = document.queryselector('.masonry'); var msnry = new masonry( container, { // options gutter: 80, itemselector: '.tile', isfitwidth: true, }); var hodgecont = document.queryselector('.hodgemasonry'); var msnry = new masonry( hodgecont, { // options gutter: 50, itemselector: '.hodgeitem', isfitwidth: true, }); $container.imagesloaded( function(){ $container.masonry({ itemselector : '.hodgeitem' }); }); #overviewwrapper { padding: @edgepadding; width: 100%; min-width: 0; //max-width: @maxwidth; margin: auto; margin-top: @topmargin; //background-color: green; } css
#overviewwrapper { padding: @edgepadding; width: 100%; min-width: 0; //max-width: @maxwidth; margin: auto; margin-top: @topmargin; //background-color: green; } .tile { width: 100%; max-width: 500px; min-width: 0; margin: auto; margin-bottom: 50px; } html
<div id = 'overviewwrapper' class = 'masonry design' > <div class = 'tile'> <h2><span>is jack wild?</span></h2> <div id = 'aboutmetext'> <p>about para</p> </div> <div class = 'info'> <ul> <li>+49 ******</li> <li>info (at) ******/li> </ul> </div> </div> ***other tiles here*** </div>
Comments
Post a Comment