Add media queries for most popular devices (#19)

https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and-dpi-most-popular-smartphones

1 files changed, 40 insertions, 0 deletions

diff --git a/static/assets/css/experiences.css b/static/assets/css/experiences.css
index 595171c..bb2f794 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/experiences.css
@@ -113,3 +113,43 @@
 
 @media only screen and (max-width: 576px) {
 }
+
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+  .top-left {
+    left: -52%;
+    top: -50%;
+  }
+  
+  .top-right {
+    left: 52%;
+    top: -50%;
+  }
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+  .top-left {
+    left: -56%;
+    top: -50%;
+  }
+  
+  .top-right {
+    left: 56%;
+    top: -50%;
+  }
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+  .top-left {
+    left: -64%;
+    top: -50%;
+  }
+  
+  .top-right {
+    left: 64%;
+    top: -50%;
+  }
+}
\ No newline at end of file