Index: lams_tool_preview/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -ra93929c9c7f7f0df676412691f2f8f9d44d201a2 -r2a9170f5c57793fac9f582e67904d6e001b2034d
--- lams_tool_preview/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision a93929c9c7f7f0df676412691f2f8f9d44d201a2)
+++ lams_tool_preview/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 2a9170f5c57793fac9f582e67904d6e001b2034d)
@@ -64,7 +64,7 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-<div class="rating-stars-holder">
+<div class="rating-stars-holder text-center center-block">
 
 	<c:set var="hasStartedRating" value="false"/>
 	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
@@ -85,9 +85,9 @@
 			</c:otherwise>
 		</c:choose>
 			
-		<h4>
+		<strong>
 			${criteriaDto.ratingCriteria.title}
-		</h4>
+		</strong>
 			
 		<c:choose>
 			<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
@@ -167,21 +167,25 @@
 			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
 				<div id="add-comment-area-${itemRatingDto.itemId}">
 			
-					<!-- Rating limits info -->
+					<!-- Comment min words limit -->
 					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
 					
-						<div class="info rating-info">
+						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
 							<fmt:message key="${minNumberWordsLabel}">
 								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
 							</fmt:message>
-						</div>
+						</lams:Alert>
 					</c:if>		
 				
-					<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" onfocus="if(this.value==this.defaultValue)this.value='';" 
-							onblur="if(this.value=='')this.value=this.defaultValue;" ><fmt:message key="label.comment.textarea.tip"/></textarea>
-				
-					<div class="button add-comment add-comment-new" data-item-id="${itemRatingDto.itemId}" data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}">
-					</div>			
+					<div class="no-gutter">
+						<div class="col-xs-12 col-sm-11 ">
+						<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" onfocus="if(this.value==this.defaultValue)this.value='';" 
+								onblur="if(this.value=='')this.value=this.defaultValue;" 
+								class="form-control"><fmt:message key="label.comment.textarea.tip"/></textarea>
+						</div>
+						<div class="button add-comment add-comment-new col-xs-12 col-sm-1 " data-item-id="${itemRatingDto.itemId}" data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}">
+						</div>
+					</div>		
 				</div>			
 			</c:when>
 		</c:choose>
Index: lams_tool_preview/web/includes/css/learning.css
===================================================================
diff -u -r609767222710b5960b019fdb34908f682554935e -r2a9170f5c57793fac9f582e67904d6e001b2034d
--- lams_tool_preview/web/includes/css/learning.css	(.../learning.css)	(revision 609767222710b5960b019fdb34908f682554935e)
+++ lams_tool_preview/web/includes/css/learning.css	(.../learning.css)	(revision 2a9170f5c57793fac9f582e67904d6e001b2034d)
@@ -1,24 +1,35 @@
-		.rating-stars-div {margin-top: 8px;}
-		.user-answer {padding: 0 2px;}
-		tr.odd:hover .jStar {background-image: url(/lams/images/css/jquery.jRating-stars-grey.png)!important;}
-		tr.even:hover .jStar {background-image: url(/lams/images/css/jquery.jRating-stars-light-grey.png)!important;}
-		tr.odd .jStar {background-image: url(/lams/images/css/jquery.jRating-stars-light-blue.png)!important;}
-		td.username {min-width: 150px;}
-		td.rating {width:150px;}
-		td.comment {min-width: 250px;}
-		.alert {padding:8px}
-		.extra-controls-inner:after {
-		   margin-top: -10px;
-		}
-		.rating-comment{
-			background-image: none;
-			background-color: rgba(205, 205, 205, 0.1);
-			border: 1px solid rgba(205, 205, 205, 0.2);
-		}
-		textarea {
-		    margin: 10px 0px;
-		    width: 88%;
-		}
-		.add-comment {
-		    margin-top: 60px;
-		}
\ No newline at end of file
+.rating-stars-div {margin-top: 8px;}
+.user-answer {padding: 0 2px;}
+.tablesorter tr.odd:hover .jStar {
+	background-image: url(/lams/images/css/jquery.jRating-stars-grey.png)!important;
+}
+.tablesorter tr.even:hover .jStar {
+	background-image: url(/lams/images/css/jquery.jRating-stars-light-grey_copy.png)!important;
+}
+.tablesorter tr.odd .jStar {
+	background-image: url(/lams/images/css/jquery.jRating-stars-light-blue.png)!important;
+}
+td.username {min-width: 150px;}
+td.rating {width:150px;}
+td.comment {min-width: 250px;}
+.alert {padding:8px}
+.extra-controls-inner:after {
+   margin-top: -10px;
+}
+.rating-comment{
+	background-image: none;
+	background-color: rgba(205, 205, 205, 0.1);
+	border: 1px solid rgba(205, 205, 205, 0.2);
+}
+textarea {
+    margin: 10px 0px;
+    width: 88%;
+}
+.add-comment {
+    margin-top: 60px;
+}
+@media (max-width: 768px)  {
+	.add-comment {
+		margin-top: 10px;
+	}
+}
\ No newline at end of file
Index: lams_tool_preview/web/pages/learning/learning.jsp
===================================================================
diff -u -rcff1f4709263aa5513ac0b4f5fd239a1390d905b -r2a9170f5c57793fac9f582e67904d6e001b2034d
--- lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision cff1f4709263aa5513ac0b4f5fd239a1390d905b)
+++ lams_tool_preview/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 2a9170f5c57793fac9f582e67904d6e001b2034d)
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-        
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
@@ -117,7 +115,7 @@
 							rows += '</td>';
 							
 							rows += '<td class="rating">';
-							rows += 	'<div class="rating-stars-holder">';
+							rows += 	'<div class="rating-stars-holder text-center center-block">';
 
 							// if the user has left a comment or done a rating in a batch of ratings, we need to keep all related ratings open.
 							var hasStartedRating = false;
@@ -141,9 +139,9 @@
 								var averageRatingDisplayed = (!isCriteriaNotRatedByUser) ? averageRating : 0;
 								var ratingStarsClass = (isDisabled || !isCriteriaNotRatedByUser) ? "rating-stars-disabled" : "rating-stars";
 							
-								rows += '<h4>';
+								rows += '<strong>';
 								rows += 	 criteriaDto.title;
-								rows += '</h4>';
+								rows += '</strong>';
 										
 								rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ averageRatingDisplayed +'" data-id="'+ objectId +'">';
 								rows += '</div>';
@@ -177,11 +175,17 @@
 										
 								//show comments textarea and a submit button
 								} else if (!isDisabled) {
-									rows += '<div id="add-comment-area-' + itemId + '">';											
-									rows +=		'<textarea name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"><fmt:message key="label.comment.textarea.tip"/></textarea>';
-									
-									rows += 	'<div class="button add-comment add-comment-new" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'">';
+									rows += '<div id="add-comment-area-' + itemId + '">';	
+									rows += '<div class="no-gutter">';
+									rows += '';
+									rows += '<div class="col-xs-12 col-sm-11 ">';										
+									rows +=		'<textarea name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;" class="form-control"><fmt:message key="label.comment.textarea.tip"/></textarea>';
+									rows += '</div>';
+									rows += 	'<div class="button add-comment add-comment-new col-xs-12 col-sm-1" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'">';
 									rows += 	'</div>';
+									
+									rows += '';
+									rows += '';
 									rows += '</div>';											
 								}