diff --git a/web/client/components/catalog/RecordGrid.jsx b/web/client/components/catalog/RecordGrid.jsx
index 9825471370..a26a245d4b 100644
--- a/web/client/components/catalog/RecordGrid.jsx
+++ b/web/client/components/catalog/RecordGrid.jsx
@@ -30,7 +30,7 @@ const RecordGrid = React.createClass({
             records: [],
             onLayerAdd: () => {},
             onError: () => {},
-            column: {xs: 12, sm: 6, md: 6, lg: 6}
+            column: {xs: 12, sm: 12, md: 12, lg: 12}
         };
     },
     renderRecordItem(record) {
@@ -53,7 +53,7 @@ const RecordGrid = React.createClass({
         if (this.props.records) {
             let mapsList = this.props.records instanceof Array ? this.props.records : [this.props.records];
             return (
-                <Grid className="record-grid" style={this.props.style}>
+                <Grid className="record-grid" fluid={true} style={this.props.style}>
                     <Row>
 						{mapsList.map(this.renderRecordItem)}
 					</Row>
diff --git a/web/client/components/catalog/__tests__/RecordGrid-test.jsx b/web/client/components/catalog/__tests__/RecordGrid-test.jsx
index 90e904e0cd..c49d5a71c8 100644
--- a/web/client/components/catalog/__tests__/RecordGrid-test.jsx
+++ b/web/client/components/catalog/__tests__/RecordGrid-test.jsx
@@ -53,7 +53,7 @@ describe('This test for Record Grid', () => {
         const itemDom = ReactDOM.findDOMNode(item);
         expect(itemDom).toExist();
 
-        expect(itemDom.className).toBe("record-grid container");
+        expect(itemDom.className).toBe("record-grid container-fluid");
     });
     // test data
     it('creates the component with data', () => {
@@ -62,7 +62,7 @@ describe('This test for Record Grid', () => {
 
         const itemDom = ReactDOM.findDOMNode(item);
         expect(itemDom).toExist();
-        expect(itemDom.className).toBe("record-grid container");
+        expect(itemDom.className).toBe("record-grid container-fluid");
 
         // check the thumbnail as a to verify thtat the url is really loaded into the component
         let img = TestUtils.findRenderedDOMComponentWithTag(
diff --git a/web/client/jsapi/mapstore2.css b/web/client/jsapi/mapstore2.css
index fe5c03b9f9..997d04b972 100644
--- a/web/client/jsapi/mapstore2.css
+++ b/web/client/jsapi/mapstore2.css
@@ -445,8 +445,8 @@
 }
 
 #mapstore-catalog-panel {
-    width: auto;
-    margin: 100px;
+    width: 920px;
+    margin: 0px;
 }
 
 #mapstore-catalog-panel .record-item {
diff --git a/web/client/plugins/MetadataExplorer.jsx b/web/client/plugins/MetadataExplorer.jsx
index 38a5ccdb7e..50e0d70d2d 100644
--- a/web/client/plugins/MetadataExplorer.jsx
+++ b/web/client/plugins/MetadataExplorer.jsx
@@ -80,7 +80,7 @@ const MetadataExplorerComponent = React.createClass({
                         {panel}
                     </Panel>);
                 }
-                return (<Dialog id="mapstore-catalog-panel" style={this.props.style}>
+                return (<Dialog modal id="mapstore-catalog-panel" style={assign({}, this.props.style, {display: "block" })}>
                     <span role="header"><span className="metadataexplorer-panel-title"><Message msgId="catalog.title"/></span><button onClick={this.props.toggleControl} className="print-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
                     {panel}
                 </Dialog>);
diff --git a/web/client/product/assets/css/viewer.css b/web/client/product/assets/css/viewer.css
index bf7c6d1c2a..fe1c740db0 100644
--- a/web/client/product/assets/css/viewer.css
+++ b/web/client/product/assets/css/viewer.css
@@ -390,8 +390,8 @@ html, body, #container, .fill {
 }
 
 #mapstore-catalog-panel {
-    width: auto;
-    margin: 100PX;
+    width: 920px;
+    margin: 0px;
 }
 
 #mapstore-catalog-panel .record-item {
@@ -575,3 +575,24 @@ html, body, #container, .fill {
     font-size: 16px;
     color: red;
 }
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 280px ) {
+    #mapstore-catalog-panel {
+        width: 305px;
+    }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+    #mapstore-catalog-panel {
+        width: 500px;
+    }
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+    #mapstore-catalog-panel {
+        width: 920px;
+    }
+}