# This is a combination of 3 commits.

# This is the 1st commit message:

/crates page, better mobile styling

# The commit message rust-lang#2 will be skipped:

# changed data-test attr for class

# The commit message rust-lang#3 will be skipped:

# bottom positioning of header element on crates page

Author: someguynamedmatt

app/styles/crate.scss

@@ -25,6 +25,10 @@
         .team-info {
             @include flex-direction(column);
         }
+        h1 {
+            position: relative;
+            bottom: 0.3rem;
+        }
     }
     h1 {
         padding-left: 10px;
@@ -118,12 +122,35 @@
     }
 }
 
+.crate-link {
+    display: inline-block;
+}
+
+@media only screen and (max-width: 639px) {
+    .white-rows div {
+        margin: auto auto 0.2rem auto;
+        text-align: center;
+    }
+    .white-rows > div .row {
+        flex-flow: column wrap;
+    }
+    .row > div.stats {
+        width: 100%;
+        display: flex;
+        margin: auto;
+    }
+    .crate-link {
+        text-align: center;
+        display: block;
+    }
+}
+
 .crate {
     .desc {
         padding-top: 5px;
         @include display-flex;
         @include flex-direction(column);
-        width: 75%;
+        @media screen and (min-width: 640px){ width: 75%; }
     }
 
     .info a {
@@ -143,7 +170,7 @@
     .downloads {
         @include display-flex;
         @include align-items(center);
-        padding-bottom: 5px;
+        @media screen and (min-width: 640px) { padding-bottom: 5px; }
     }
     .recent-downloads {
         @include display-flex;

app/templates/components/crate-row.hbs

@@ -1,6 +1,8 @@
 <div class='desc'>
     <div class='info'>
-        {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
+        <div class='crate-link'>
+            {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
+        </div>
         <span class='vers'>
             <img
                 src="https://img.shields.io/crates/v/{{ crate.name }}.svg"