diff --git a/view/css/mod_profile_photo.css b/view/css/mod_profile_photo.css
index 5540b5fae..1b7e15194 100644
--- a/view/css/mod_profile_photo.css
+++ b/view/css/mod_profile_photo.css
@@ -9,4 +9,12 @@
 
 #profile-photo-submit-wrapper {
 	clear: both;
-}
\ No newline at end of file
+}
+
+#profile-photo-wrapper {
+	height: 300px;
+	width: 300px;
+	max-width: 300px;
+	max-height: 300px;
+	overflow: hidden;
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index b0a109c92..1611cda60 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -381,14 +381,9 @@ footer {
 	margin: 15px 0px;
 }
 
-#cropimage-wrapper, #cropimage-preview-wrapper {
-	float: left;
-	padding: 30px;
-}
-
-#crop-image-form {
-	margin-top: 30px;
-	clear: both;
+#cropimage-wrapper,
+#cropimage-preview-wrapper {
+	margin-bottom: 10px;
 }
 
 .fn {
diff --git a/view/tpl/cropbody.tpl b/view/tpl/cropbody.tpl
index e008167bb..a8b8207cb 100755
--- a/view/tpl/cropbody.tpl
+++ b/view/tpl/cropbody.tpl
@@ -6,7 +6,7 @@
 <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
 </div>
 <div id="cropimage-preview-wrapper" >
-<div id="previewWrap" class="crop-preview" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></div>
+<div id="previewWrap" class="crop-preview d-lg-none" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></div>
 </div>
 
 <script type="text/javascript" language="javascript">
@@ -16,7 +16,7 @@ var image = document.getElementById('croppa');
 var cropper = new Cropper(image, {
 	aspectRatio: 1 / 1,
 	viewMode: 1,
-	preview: '.crop-preview',
+	preview: '#profile-photo-wrapper, .crop-preview',
 	crop: function(e) {
 		$( '#x1' ).val(e.detail.x);
 		$( '#y1' ).val(e.detail.y);