Skip to content

Instantly share code, notes, and snippets.

@lucasromerodb
Last active August 29, 2015 14:17
Show Gist options
  • Save lucasromerodb/ee99d0ba2fc038636f21 to your computer and use it in GitHub Desktop.
Save lucasromerodb/ee99d0ba2fc038636f21 to your computer and use it in GitHub Desktop.
When you add some elements, this auto resize the boxes dividing 100% (width) by amount of this.
HTML Before
<div class="boxes">
<div></div>
<div></div>
<div></div>
</div>
$(document).ready(function(){
var multiBox = $('.boxes div').size();
if ( multiBox > 0 && $(window).width() > 768 ) { // only for desktop
$('.boxes div').css('width', (100 / multiBox) + '%');
} else {
$('.boxes div').css('width', '100%');
}
});
HTML After > 768px
<div class="boxes">
<div style="width: 33,333333333%"></div>
<div style="width: 33,333333333%"></div>
<div style="width: 33,333333333%"></div>
</div>
HTML After < 768px
<div class="boxes">
<div style="width: 100%"></div>
<div style="width: 100%"></div>
<div style="width: 100%"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment