feat: NR3156 - fix for responsiveness on browsers

newrelic · May 2, 2022 · 182de2c · 182de2c
1 parent 2381b29
commit 182de2c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 3 deletions.
diff --git a/src/components/LandingPageFooter.js b/src/components/LandingPageFooter.js
@@ -44,6 +44,13 @@ const LandingPageFooter = ({
                           margin-bottom: 34px !important;
                       }
                     }
+
+                    @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
+                        @media {
+                            grid-template-columns: repeat(1, 1fr);
+                            margin-left: 40px;
+                          margin-right: 23px;
+                        }}
           `}>
                 <PageTools.Section>
                     <h6>

diff --git a/src/components/QuickstartHowToUse.js b/src/components/QuickstartHowToUse.js
@@ -26,11 +26,16 @@ const QuickstartHowToUse = ({
           }
 
           @media screen and (max-width: 760px){
-            display: grid;
-            grid-template-columns: repeat(1, 1fr);
             margin-left: 40px;
             margin-right: 23px;
         }
+
+        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
+          @media {
+              grid-template-columns: repeat(1, 1fr);
+              margin-left: 40px;
+            margin-right: 23px;
+          }}
         `}>
         <PageTools.Section>
           <h3
@@ -126,7 +131,7 @@ const QuickstartHowToUse = ({
             location={location}
             css={css`
                             background: var(--background-color);
-                            padding: 13px 20px 14px 20px;
+                            padding: 18px 20px 18px 20px;
                             font-weight: 400;
                           `} />
         </PageTools.Section>

diff --git a/src/components/WhatsIncluded/Alerts.js b/src/components/WhatsIncluded/Alerts.js
@@ -20,6 +20,13 @@ const Alerts = ({ quickstart }) => {
           margin-left: 40px;
           margin-right: 23px;
         }
+
+        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
+            @media {
+                grid-template-columns: repeat(1, 1fr);
+                margin-left: 40px;
+              margin-right: 23px;
+            }}
         `}
         >
             <PageTools.Section>

diff --git a/src/components/WhatsIncluded/Dashboards.js b/src/components/WhatsIncluded/Dashboards.js
@@ -23,6 +23,13 @@ const Dashboards = ({ quickstart }) => {
           margin-right: 23px;
           
         }
+
+        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
+            @media {
+                grid-template-columns: repeat(1, 1fr);
+                margin-left: 40px;
+              margin-right: 23px;
+            }}
         `}
         >
             <PageTools.Section>

diff --git a/src/components/WhatsIncluded/DataSources.js b/src/components/WhatsIncluded/DataSources.js
@@ -19,6 +19,13 @@ const DataSources = ({ quickstart }) => {
           margin-left: 40px;
           margin-right: 23px;
         }
+
+        @media not all and (min-resolution:.001dpcm) and max-width: 760px { 
+            @media {
+                grid-template-columns: repeat(1, 1fr);
+                margin-left: 40px;
+              margin-right: 23px;
+            }}
         `}
         >
             <PageTools.Section>