better mobile for list

css/simpleStore.css

@@ -41,7 +41,7 @@ a.hover {
 
 .simpleCart_shelfItem {
  border: 1px solid #EFEFEF;
- padding: 25px 18px;
+ padding: 25px 18px 10px 18px;
  margin: 15px 0;
 }
 
@@ -150,6 +150,13 @@ a.hover {
 
 /* Views */
 
+.simpleStore_getDetail_container {
+ display: block;
+ float: left;
+ width: 50%;
+ padding: 5px 0px;
+}
+
 .simpleStore_detailView {
  margin: 15px 0px;
  border: 1px solid #EFEFEF;
@@ -279,6 +286,25 @@ p.error_text {
  margin-bottom: 0rem;
 }
 
+@media (max-width: 920px) {
+ .simpleStore_getDetail_container {
+ width: 100%;
+ }
+ .simpleCart_shelfItem {
+ position: relative;
+ }
+ .simpleCart_shelfItem .item_name {
+ font-size: 1.8rem;
+ }
+ .simpleStore_getDetail {
+ position: inherit;
+ display: block;
+ width: 100%;
+ margin: 0px;
+ margin-bottom: 0px;
+ }
+}
+
 @media (max-width: 620px) {
 
  .simpleStore_detailView .item_thumb {

index.html

@@ -50,9 +50,16 @@
  <div class="column">
  <div class="simpleCart_shelfItem">
  <img src="" class="item_thumb"/>
- <h5 class="item_name"></h5>
- <span class="item_price"></span>
- <a class="button u-pull-right simpleStore_getDetail">Details</a>
+ <div class="row">
+ <h5 class="item_name"></h5>
+ <div class="simpleStore_getDetail_container">
+ <span class="item_price"></span>
+ </div>
+ <div class="simpleStore_getDetail_container">
+ <a class="button u-pull-right simpleStore_getDetail">Details</a>
+ </div>
+ </div>
+
  </div>
  </div>
  </script>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "simplestore",
- "version": "1.4",
+ "version": "1.5",
  "description": "A clean, responsive storefront boilerplate with no database or backend.",
  "main": "index.html",
  "scripts": {