diff --git src/bp-core/css/avatar.css src/bp-core/css/avatar.css
index 32dceaa..191944d 100644
--- src/bp-core/css/avatar.css
+++ src/bp-core/css/avatar.css
@@ -1,6 +1,6 @@
 div.bp-avatar-status {
-	clear:both;
-	margin:1em 0;
+	clear: both;
+	margin: 1em 0;
 }
 
 div.bp-avatar-status p.updated {
@@ -21,47 +21,47 @@ div.bp-avatar-status p.error {
 }
 
 .progress {
+	background: none;
+	border: 1px solid #d1d1d1;
 	float: right;
 	height: 22px;
-	margin: 6px 10px 0 0;
-	width: 200px;
 	line-height: 2em;
+	margin: 6px 10px 0 0;
+	margin-bottom: 2px;
 	padding: 0;
 	overflow: hidden;
-	margin-bottom: 2px;
-	border: 1px solid #d1d1d1;
-	background: none;
+	width: 200px;
 }
 
 .bar {
-	z-index: 9;
+	background-color: #c3ff88;
 	width: 0;
 	height: 100%;
-	background-color: #c3ff88;
+	z-index: 9;
 }
 
 .bp-uploader-progress div.error {
-	font-size: 90%;
-	display: block;
-	padding: 10px 15px;
 	background-color: #fdc;
 	border: 1px solid #a00;
 	color: #800;
+	display: block;
+	font-size: 90%;
+	padding: 10px 15px;
 }
 
 #bp-uploader-warning, #bp-webcam-message p.warning {
-	margin:1em 0;
-	font-size: 90%;
-	display: block;
-	padding: 10px 15px;
 	background-color: #ffec8b;
 	border: 1px solid #fc0;
 	color: #440;
+	display: block;
+	font-size: 90%;
+	margin: 1em 0;
+	padding: 10px 15px;
 }
 
 div.bp-avatar-nav {
-	clear:both;
 	background: transparent;
+	clear: both;
 	margin: 10px 0 10px;
 	overflow: hidden;
 }
@@ -72,22 +72,22 @@ div.bp-avatar-nav {
 }
 
 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
- 	float: left;
- 	margin: 0;
- 	list-style: none;
- }
+	float: left;
+	margin: 0;
+	list-style: none;
+}
 
 .avatar-nav-items li a {
-  	display: block;
-  	padding: 5px 10px;
-  	text-decoration: none;
+	display: block;
+	padding: 5px 10px;
+	text-decoration: none;
 }
 
 .avatar-nav-items li.current a {
 	background-color: #eee;
 	color: #555;
-	opacity: .8;
 	font-weight: bold;
+	opacity: 0.8;
 }
 
 #drag-drop-area {
@@ -100,24 +100,34 @@ div.bp-avatar-nav {
 }
 
 .drag-drop-inside p {
-	display:none;
+	display: none;
 }
 
 .drag-drop-inside p.drag-drop-buttons {
-	margin-top:80px;
+	margin-top: 80px;
 	text-align: center;
 }
+
 .drag-drop .drag-drop-inside p.drag-drop-buttons {
-	margin:auto;
+	margin: auto;
 	text-align: auto;
 }
 
+.drag-drop #drag-drop-area {
+	display: table;
+	height: 100%;
+	width: 100%;
+}
+
 .drag-drop .drag-drop-inside {
-	margin: 70px auto 0;
-	width: 250px;
+	display: table-cell;
+	padding: 40px 0;
+	text-align: center;
+	vertical-align: middle;
 }
 
-.drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
+.drag-drop .drag-drop-inside p,
+.drag-drop-inside p.drag-drop-buttons {
 	display: block;
 }
 
@@ -128,17 +138,74 @@ div.bp-avatar-nav {
 	text-align: center;
 }
 
+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
+
 #avatar-to-crop {
-	float: left;
-	margin: 0 20px 20px 0;
+	margin: 0 auto 20px ;
 	text-align: left;
 }
+
+#bp-webcam-avatar #avatar-to-crop {
+	float: left;
+	margin: 0 0 20px;
+}
+
+#avatar-to-crop .jcrop-holder {
+	margin: 0 auto;
+}
+
+.avatar-crop-management {
+	clear: left;
+	overflow: hidden;
+	padding-top: 20px;
+	text-align: center;
+}
+
+#bp-webcam-avatar .avatar-crop-management {
+	clear: none;
+	float: none;
+	overflow: visible;
+	padding-top: 0;
+	width: auto;
+}
+
 #avatar-crop-pane {
+	margin: 0 auto;
 	overflow: hidden;
 }
 
-#avatar-crop-actions {
-	margin: 20px 0;
+#bp-webcam-avatar #avatar-to-crop {
+	border: 1px solid #eee;
+	max-width: 100%;
+	width: 100%;
+}
+
+@media screen and (min-width: 801px) {
+	#bp-webcam-avatar #avatar-to-crop {
+		max-width: 64%;
+		width: 64%;
+	}
+}
+
+#avatar-crop-actions a {
+	display: block;
+}
+
+#bp-webcam-avatar #avatar-crop-actions {
+	float: left;
+	margin: 0 0 20px 0;
+	width: 50%;
+}
+
+#avatar-crop-actions a.button {
+	margin-top: 10px;
+}
+
+#bp-webcam-avatar #avatar-crop-actions a.button {
+	display: block;
+	margin: 0 0 5px;
+	padding: 4px 0;
+	width: 100%;
 }
 
 #avatar-to-crop img,
@@ -152,19 +219,96 @@ div.bp-avatar-nav {
 }
 
 #bp-webcam-avatar video {
-	float:left;
-	width:450px;
+	float: left;
+	margin-bottom: 0;
+	max-width: 100%;
+	width: 100%;
+	-webkit-transform: scaleX(-1);
+	transform: scaleX(-1);
 }
 
 #bp-webcam-avatar #avatar-crop-pane {
 	border: 2px dashed #bbb;
+	clear: left;
+	float: right;
+	margin: 0  40px 10px 0;
+	overflow: hidden;
+}
+
+/**
+*  Users can define avatar constants with new dimension values
+*  If they do, we'll ensure the layouts preserved by enforcing a max width
+*  that matches bp default settings.
+*/
+#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+	max-width: 150px;
+	max-height: 150px;
+}
+
+#avatar-crop-pane canvas {
+	height: auto;
+	width: 100%;
+	max-width: 100%;
+}
+
+.group-avatar .bp-avatar .avatar-crop-management {
+	margin-left: 0;
+	padding-top: 0;
+	width: auto;
+}
+
+.bp-avatar .avatar-crop-management.adjust {
+	float: left;
+	clear: none;
+	padding-top: 0;
+}
+
+.bp-avatar #avatar-to-crop.adjust {
+	float: left;
+	margin-right: 20px;
+}
+
+@media screen and (max-width: 480px) {
+
+	#bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
+	#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+		float: none;
+	}
+
+	#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+		margin: 0 auto 10px;
+	}
+
+	#bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
+		width: auto;
+	}
+
+}
+
+@media screen and (min-width: 801px) {
+
+	#bp-webcam-avatar .avatar-crop-management {
+		clear: none;
+		float: right;
+	}
+
+	#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+		float: none;
+		margin: 0 auto 10px;
+	}
+
+	#bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
+		float: left;
+		width: 100%;
+	}
+
 }
 
 /** Admin Profile **/
 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
-	width:95%!important;
-	height:95%!important;
+	height: 95% !important;
+	width: 95% !important;
 }
 
 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,
@@ -174,3 +318,44 @@ body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent p.warning {
 	display: block;
 	padding: 10px 15px;
 }
+
+.wp-admin #TB_window .bp-avatar #avatar-to-crop {
+	float: left;
+	margin: 0;
+}
+.wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
+	margin-bottom: 20px;
+}
+@media screen and (min-width: 783px) {
+
+	.wp-admin #TB_window .bp-avatar .avatar-crop-management {
+		clear: none;
+		float: left;
+		margin-left: 20px;
+		padding-top: 0;
+		text-align: center;
+
+	}
+
+}
+
+.wp-admin #TB_window .bp-avatar #avatar-to-crop video {
+		width: 100%;
+	}
+
+.wp-admin #TB_window .bp-avatar .avatar-crop-management a.button {
+	height: auto;
+	line-height: inherit;
+}
+
+@media screen and (min-width: 810px) {
+	.wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
+		max-width: none;
+		width: 76%;
+	}
+
+	.wp-admin #TB_window #bp-webcam-avatar .avatar-crop-management {
+		max-width: none;
+		width: auto;
+	}
+}
diff --git src/bp-core/js/avatar.js src/bp-core/js/avatar.js
index 7d592f7..7a18c13 100644
--- src/bp-core/js/avatar.js
+++ src/bp-core/js/avatar.js
@@ -494,6 +494,7 @@ window.bp = window.bp || {};
 		initCropper: function() {
 			var self = this,
 				tocrop = this.$el.find( '#avatar-to-crop img' ),
+				availableWidth = this.$el.width(),
 				selection = {}, crop_top, crop_bottom, crop_left, crop_right, nh, nw;
 
 			if ( ! _.isUndefined( this.options.full_h ) && ! _.isUndefined( this.options.full_w ) ) {
@@ -503,6 +504,15 @@ window.bp = window.bp || {};
 			selection.w = this.model.get( 'width' );
 			selection.h = this.model.get( 'height' );
 
+			/**
+			 * Make sure the crop preview is at the right of the avatar
+			 * if the available width allowes it.
+			 */
+			if ( this.options.full_w + selection.w + 20 < availableWidth ) {
+				$( '#avatar-to-crop' ).addClass( 'adjust' );
+				this.$el.find( '.avatar-crop-management' ).addClass( 'adjust' );
+			}
+
 			if ( selection.h <= selection.w ) {
 				crop_top    = Math.round( selection.h / 4 );
 				nh = nw     = Math.round( selection.h / 2 );
diff --git src/bp-core/js/webcam.js src/bp-core/js/webcam.js
index 3d5f1e7..2584465 100644
--- src/bp-core/js/webcam.js
+++ src/bp-core/js/webcam.js
@@ -21,7 +21,8 @@ window.bp = window.bp || {};
 				capture_enable: false,
 				capture:        null,
 				canvas:         null,
-				warning:        null
+				warning:        null,
+				flipped:        false
 			};
 
 			bp.Avatar.nav.on( 'bp-avatar-view:changed', _.bind( this.setView, this ) );
@@ -44,6 +45,9 @@ window.bp = window.bp || {};
 			// Create the WebCam view
 			var cameraView = new bp.Views.WebCamAvatar( { model: new Backbone.Model( { user_media: false } ) } );
 
+			// Make sure the flipped param is reset
+			this.params.flipped = false;
+
 			// Add it to views
 			bp.Avatar.views.add( { id: 'camera', view: cameraView } );
 
@@ -242,6 +246,13 @@ window.bp = window.bp || {};
 			sc = this.options.video.el.videoHeight;
 			sx = ( this.options.video.el.videoWidth - sc ) / 2;
 
+			// Flip only once.
+			if ( ! bp.WebCam.params.flipped ) {
+				this.options.canvas.el.getContext( '2d' ).translate( this.model.get( 'w' ), 0 );
+				this.options.canvas.el.getContext( '2d' ).scale( -1, 1 );
+				bp.WebCam.params.flipped = true;
+			}
+
 			this.options.canvas.el.getContext( '2d' ).drawImage( this.options.video.el, sx, 0, sc, sc, 0, 0, this.model.get( 'w' ), this.model.get( 'h' ) );
 			bp.WebCam.params.capture = this.options.canvas.el.toDataURL( 'image/png' );
 			this.model.set( 'url', bp.WebCam.params.capture );
diff --git src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php
index 5ac2be1..4368796 100644
--- src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php
+++ src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php
@@ -17,10 +17,12 @@
 		</div>
 	<# } else { #>
 		<div id="avatar-to-crop"></div>
-		<div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
-		<div id="avatar-crop-actions">
-			<a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
-			<a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
+		<div class="avatar-crop-management">
+			<div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
+			<div id="avatar-crop-actions">
+				<a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
+				<a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
+			</div>
 		</div>
 	<# } #>
 </script>
diff --git src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php
index 086632c..274e97e 100644
--- src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php
+++ src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php
@@ -14,10 +14,12 @@
 	<div id="avatar-to-crop">
 		<img src="{{data.url}}"/>
 	</div>
-	<div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
-		<img src="{{data.url}}" id="avatar-crop-preview"/>
-	</div>
-	<div id="avatar-crop-actions">
-		<a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
+	<div class="avatar-crop-management">
+		<div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
+			<img src="{{data.url}}" id="avatar-crop-preview"/>
+		</div>
+		<div id="avatar-crop-actions">
+			<a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
+		</div>
 	</div>
 </script>