Profile view made responsive (Stage 1)

assets/css/um-profile.css

@@ -12,7 +12,9 @@
 .um-profile a:hover {text-decoration:none !important}
 
 .um-profile .um-profile-body {
-	padding: 15px 170px 0 170px;
+	padding-top: 15px;
+	max-width: 600px;
+	margin: auto;
 }
 
 .um-profile.um-editing {
@@ -35,16 +37,17 @@
 	background-color: #eee;
 }
 
-.um-cover-e {
-    min-height: 200px;
-	text-align: center;
-	box-sizing: border-box;
-	border: 2px dashed #ddd;
+.um-cover-add span {
+	display: table-cell;
+	vertical-align: middle;
 }
 
-.um-cover-e img {
-	width: 100% !important;
+.um-cover-e {
+	text-align: center;
+	box-sizing: border-box;
 }
+.um-cover-e.empty {border: 2px dashed #ddd}
+.um-cover-e img {width: 100% !important}
 
 .um-cover-add {
 	color: #aaa;
@@ -52,13 +55,6 @@
 	width: 100%;
 	display: table;
 }
-
-.um-cover-add span {
-	display: table-cell;
-	vertical-align: middle;
-	height: 200px;
-}
-
 .um-cover-add:hover { color: #3ba1da }
 
 /*
@@ -75,14 +71,15 @@
 	position: absolute;
 	top: 15px;
 	right: 15px;
-	font-size: 26px;
-	height: 26px;
-	line-height: 26px;
 	vertical-align: middle;
+	z-index: 99;
+	font-size: 30px;
+	height: 30px;
+	line-height: 30px;
 }
 
 .um-profile-edit i, .um-profile-edit i:before {
-	height: 26px;
+	height: 30px;
 	vertical-align: bottom !important;
 }
 
@@ -153,13 +150,13 @@
 }
 
 .um-main-meta {
-	font-size: 24px;
-	font-weight: bold;
 	padding: 10px 0 0 0;
 }
 
 .um-name {
 	float: left;
+	font-size: 24px;
+	font-weight: bold;
 	margin-right: 30px;
 }
 
@@ -168,10 +165,11 @@
 }
 
 .um-meta span {
-	margin: 0 10px 0 0;
+	margin: 0 5px;
 	font-size: 14px;
 }
 
 .um-meta-text {
 	margin: 12px 0 0 0;
+	color: #666;
 }

assets/css/um-raty.css

@@ -29,7 +29,7 @@
 
 .star-on-png,
 .star-half-png 
-{color: #ffbe32;}
+{color: #ffbe32}
 
 /* Icons */
 

assets/css/um-responsive.css

@@ -2,4 +2,70 @@
 	for 500px and below
 **/
 
-/********************************************/
+/********************************************/
+
+div.uimob500 .um-profile-body {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+div.uimob500 .um-profile-edit {
+	right: 0;
+}
+
+div.uimob500 .um-profile-photo {
+	width: 100% !important;
+	text-align: center !important;
+	position: absolute;
+	top: -40px;
+	left: 0;
+}
+
+div.uimob500 .um-profile-photo a.um-profile-photo-img {
+	width: 110px !important;
+	height: 110px !important;
+	margin: 0 auto !important;
+	float: none !important;
+	display: inline-block !important;
+	position: relative !important;
+	top: auto !important;
+	left: auto !important;
+}
+
+div.uimob500 .um-header .um-profile-meta {
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	text-align: center !important;
+	padding-top: 70px !important;
+}
+
+div.uimob500 .um-header .um-name { 
+	float: none !important;
+	margin-right: 0 !important;
+	font-size: 21px;
+}
+
+div.uimob500 .um-header .um-meta-text {
+	margin: 0;
+	padding: 0 20px;
+}
+
+div.uimob500 .um-header .um-meta {padding: 0 20px}
+div.uimob500 .um-header .um-meta span {display: block}
+div.uimob500 .um-header .um-meta span.b {display: none}
+
+div.uimob500 .um-col-121,
+div.uimob500 .um-col-122,
+div.uimob500 .um-col-131,
+div.uimob500 .um-col-132,
+div.uimob500 .um-col-133 {
+	float: none;
+	width: 100%;
+	margin: 0;
+}
+
+div.uimob500 .um-col-alt .um-half {
+	width: 100%;
+	float: none !important;
+	margin-bottom: 10px;
+}

assets/css/um-select.css

@@ -462,6 +462,7 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
     margin: 3px 0 !important;
 
     font-size: 100%;
+	height: auto !important;
     outline: 0;
     border: 0 !important;
     -webkit-box-shadow: none;

assets/css/um-styles.css

@@ -73,36 +73,15 @@
 .um-col-alt {margin: 0 0 5px 0}
 .um-col-alt-b {padding-top: 20px}
 
-.um-col-121 {
-	float: left;
-	width: 48%;
-	min-height: 1px;height: auto;
-}
+.um-col-121 {float: left;width: 48%;min-height: 1px;height: auto;}
 
-.um-col-122 {
-	float: right;
-	width: 48%;
-	min-height: 1px;height: auto;
-}
+.um-col-122 {float: right;width: 48%;min-height: 1px;height: auto;}
 
-.um-col-131 {
-	float: left;
-	width: 30%;
-	min-height: 1px;height: auto;
-}
+.um-col-131 {float: left;width: 30%;min-height: 1px;height: auto;}
 
-.um-col-132 {
-	float: left;
-	width: 30%;
-	margin: 0 5%;
-	min-height: 1px;height: auto;
-}
+.um-col-132 {float: left;width: 30%;margin: 0 5%;min-height: 1px;height: auto;}
 
-.um-col-133 {
-	float: right;
-	width: 30%;
-	min-height: 1px;height: auto;
-}
+.um-col-133 {float: right;width: 30%;min-height: 1px;height: auto;}
 
 /*
 	- Font Icons
@@ -124,16 +103,19 @@
 */
 
 .um-row-heading {
-	padding: 10px 0;
+	padding: 5px 0;
 	font-size: 16px;
 }
 
 .um-row-heading i {
-	margin: 0 8px 0 0;
 	font-size: 24px;
-	line-height: 24px;
 	height: 24px;
-	vertical-align: middle;
+	line-height: 24px;
+	margin: 0 12px 0 0;
+}
+
+.um-row-heading i:before {
+	vertical-align: middle !important;
 }
 
 /*
@@ -360,7 +342,7 @@ color: #666
 */
 
 .um-field-group {
-	margin-top: 30px;
+	margin-top: 20px;
 }
 
 .um-field-group-head {
@@ -379,11 +361,12 @@ color: #666
 }
 
 .um-field-group-head i {
-	font-size: 18px;
-	line-height: 22px;
-	height: 22px;
+	font-size: 20px;
 	margin: 0 8px 0 0;
-	vertical-align: middle;
+}
+
+.um-field-group-head i:before {
+	vertical-align: middle !important;
 }
 
 .um-field-group-body {

assets/dynamic_css/dynamic_profile.php

@@ -39,7 +39,7 @@ print "
 
 if ( $main_bg ) {
 print ".um-$form_id.um-profile {
-	background: $main_bg !important;
+	background-color: $main_bg !important;
 }";
 }