Snippets

Shannon Briggs Equal height and width

Updated by Shannon Briggs
View revision

File css Modified

  • Ignore whitespace
  • Hide word diff 
-.responsive_child{
-    width: 100%;
-    .thumb {
-        background-size: cover;
-        display: block;
-        height: 100%;
-    }
+.wrap{
+    width:300px;
+    height:400px;
+    border:1px solid red;
+}
+
+.child{
+    width: 50%;
+    border:1px solid blue;
 }

File html Modified

  • Ignore whitespace
  • Hide word diff 
-<div class="responsive_child">
-    <div class="thumb"></div>
+<div class="wrap">
+    <div class="child"></div>
 </div>

File javascript Modified

  • Ignore whitespace
  • Hide word diff 
 		(function($){
 			$(document).ready(function(){
 
-				var cw = $('.responsive_child').width();
-				$('.responsive_child').css({
+							var cw = $('.child').width();
+				$('.child').css({
 					'height': cw + 'px'
 				});
Updated by Shannon Briggs
View revision

File css Modified

  • Ignore whitespace
  • Hide word diff 
-.wrap{
-    width:300px;
-    height:400px;
-    border:1px solid red;
-}
-
-.child{
-    width: 50%;
-    border:1px solid blue;
+.responsive_child{
+    width: 100%;
+    .thumb {
+        background-size: cover;
+        display: block;
+        height: 100%;
+    }
 }

File html Modified

  • Ignore whitespace
  • Hide word diff 
-<div class="wrap">
-    <div class="child"></div>
+<div class="responsive_child">
+    <div class="thumb"></div>
 </div>

File javascript Modified

  • Ignore whitespace
  • Hide word diff 
-var cw = $('.child').width();
-$('.child').css({
-    'height': cw + 'px'
-});
+	<script>
+		(function($){
+			$(document).ready(function(){
+
+				var cw = $('.responsive_child').width();
+				$('.responsive_child').css({
+					'height': cw + 'px'
+				});
+
+			});
+		})(jQuery);
+	</script>
Created by Shannon Briggs
View revision

File css Added

  • Ignore whitespace
  • Hide word diff 
+.wrap{
+    width:300px;
+    height:400px;
+    border:1px solid red;
+}
+
+.child{
+    width: 50%;
+    border:1px solid blue;
+}

File html Added

  • Ignore whitespace
  • Hide word diff 
+<div class="wrap">
+    <div class="child"></div>
+</div>

File javascript Added

  • Ignore whitespace
  • Hide word diff 
+var cw = $('.child').width();
+$('.child').css({
+    'height': cw + 'px'
+});
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.