diff --git a/src/main/webapp/WEB-INF/view/error/header.jsp b/src/main/webapp/WEB-INF/view/error/header.jsp
index 72ee69bbe..95d025f32 100755
--- a/src/main/webapp/WEB-INF/view/error/header.jsp
+++ b/src/main/webapp/WEB-INF/view/error/header.jsp
@@ -12,12 +12,12 @@ ${fe:facetForm()}${fe:geoForm()}
 				styleClass="form-control" autocomplete="off" />
 			<button class="btn medium btn-primary" type="submit" name="search"
 				id="searchButton">
-				<i class="icon-search icon-white"></i><span class="hidden-phone"><la:message
+				<i class="icon-search icon-white"></i><span class="hidden-xs"><la:message
 						key="labels.search" /></span>
 			</button>
 			<a href="#searchOptions" role="button" class="btn btn-secondary"
 				data-toggle="modal"><i class="icon-cog"></i><span
-				class="hidden-phone"><la:message
+				class="hidden-xs"><la:message
 						key="labels.header_form_option_btn" /></span></a>
 		</div>
 	</nav>
diff --git a/src/main/webapp/WEB-INF/view/searchResults.jsp b/src/main/webapp/WEB-INF/view/searchResults.jsp
index 939acb71a..3a5a7dfff 100644
--- a/src/main/webapp/WEB-INF/view/searchResults.jsp
+++ b/src/main/webapp/WEB-INF/view/searchResults.jsp
@@ -58,8 +58,8 @@
 								</c:if> <c:if
 									test="${doc.last_modified!=null && doc.last_modified!=''}">
 									<c:if test="${hasInfo}">
-										<span class="br-phone"></span>
-										<span class="hidden-phone">-</span>
+										<span class="br-xs"></span>
+										<span class="hidden-xs">-</span>
 									</c:if>
 									<c:set var="hasInfo" value="true" />
 									<la:message key="labels.search_result_last_modified" />
@@ -68,24 +68,24 @@
 								</c:if> <c:if
 									test="${doc.content_length!=null && doc.content_length!=''}">
 									<c:if test="${hasInfo}">
-										<span class="br-phone"></span>
-										<span class="hidden-phone">-</span>
+										<span class="br-xs"></span>
+										<span class="hidden-xs">-</span>
 									</c:if>
 									<c:set var="hasInfo" value="true" />
 									<la:message key="labels.search_result_size"
 										arg0="${fe:formatNumber(doc.content_length)}" />
 								</c:if> <c:if test="${searchLogSupport}">
 									<c:if test="${hasInfo}">
-										<span class="br-phone"></span>
-										<span class="hidden-phone">-</span>
+										<span class="br-xs"></span>
+										<span class="hidden-xs">-</span>
 									</c:if>
 									<c:set var="hasInfo" value="true" />
 									<la:message key="labels.search_click_count"
 										arg0="${f:h(doc.click_count)}" />
 								</c:if> <c:if test="${favoriteSupport}">
 									<c:if test="${hasInfo}">
-										<span class="br-phone"></span>
-										<span class="hidden-phone">-</span>
+										<span class="br-xs"></span>
+										<span class="hidden-xs">-</span>
 									</c:if>
 									<c:set var="hasInfo" value="true" />
 									<a href="#${doc.doc_id}" class="favorite"><la:message
@@ -171,7 +171,7 @@
 			</c:if>
 			<c:forEach var="pageNumber" varStatus="s" items="${pageNumberList}">
 				<li
-					<c:if test="${pageNumber < currentPageNumber - 2 || pageNumber > currentPageNumber + 2}">class="hidden-phone"</c:if>
+					<c:if test="${pageNumber < currentPageNumber - 2 || pageNumber > currentPageNumber + 2}">class="hidden-xs"</c:if>
 					<c:if test="${pageNumber == currentPageNumber && pageNumber >= currentPageNumber - 2 && pageNumber <= currentPageNumber + 2}">class="active"</c:if>>
 					<la:link
 						href="/search/move?q=${f:u(q)}&pn=${f:u(pageNumber)}&num=${f:u(pageSize)}${fe:pagingQuery(null)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(pageNumber)}</la:link>
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index ec69f3c93..d0cab84de 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -242,30 +242,33 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 
 /* Large desktop */
 @media ( min-width : 74.9em) {
-	.visible-phone {
+	.visible-xs {
 		display: none !important;
 	}
 }
 
 /* Large devices (desktops, less than 75em) */
 @media ( max-width : 74.9em) {
-	.visible-phone {
+	.visible-xs {
 		display: none !important;
 	}
-	.br-tablet {
-		display: block;
-	}
 }
 
 /* Medium devices (tablets, less than 62em) */
 @media ( max-width : 61.9em) {
+	.visible-xs {
+		display: none !important;
+	}
 }
 
 /* Small devices (landscape phones, less than 48em) */
 @media ( max-width : 47.9em) {
-	.br-phone {
+	.br-xs {
 		display: block;
 	}
+	.hidden-xs {
+		display: none !important;
+	}
 	.mainLogo img {
 		width: 200px;
 	}
@@ -281,18 +284,18 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 	#result .info {
 		display: none;
 	}
-	body.search #searchOptions {
+	body.search #searchOptions, body.help #searchOptions {
 		width: 100%;
 		right: -100%;
 	}
-	body.search #searchOptions active {
-		left: 0;
+	body.search #searchOptions.active, body.help #searchOptions.active {
+		right: 0;
 	}
 }
 
 /* Extra small devices (portrait phones, less than 34em) */
 @media ( max-width : 360px) {
-	.br-phone {
+	.br-xs {
 		display: block;
 	}
 	.mainLogo img {