From 0dca3b1800f9622394cf599ab95840c895b9eadd Mon Sep 17 00:00:00 2001
From: Pau Trepat Segura <pau.trepat.segura@gmail.com>
Date: Tue, 30 Jun 2020 17:04:21 +0200
Subject: [PATCH] Add media queries for most popular devices (#19)

https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and-dpi-most-popular-smartphones
---
 static/assets/css/experiences.css | 40 +++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

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