Last active
August 29, 2015 14:17
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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