SameWidth

A jQuery function to resize all the elements in a container to the same width calculated from the widest.

var maxw = Math.max.apply(Math, w);
Download

The HTML

These are common buttons

The CSS

						/*Default MOBILE*/
						div.organize * {
							display: block;
							margin:5px 0;
							width:100%;
						}
						
						/*Media query for tablet and pc monitor*/	
						@media screen and (min-width: 40em) {	
							 
							div.organize *{
								display: inline-block;
								width:auto;		 		
							}
						}					
					

The Javascript

					(function ( $ ) {
						$.fn.getSameWidth = function (){
							var w=[];
							var selector = this;
							$(selector).children().each(function(){
								var val = $(this).outerWidth(); 
								w.push(val);
							});
							var maxw = Math.max.apply(Math, w);
							if($(selector).children().css('display')=='inline-block'){
								$(selector).children().css('width', maxw);
							}
							
							$(window).resize(function () {
								$(selector).children().removeAttr( "style" );
								$(selector).getSameWidth();
							});
						};
					
					}( jQuery ));
									
					

Call the plug-in

Call the function after jQuery and before the end of body.

						<script src="js/samewidth.jquery.js"></script>
						<script>$(document).ready(function(){
							$('.same-width').getSameWidth();
						});
						</script>
					

Back to HTML

TIP: Resize the page or view with a smartphone. Mobile ready!

Add the .same-width class: