Trying some fix for different browser screen

src/components/About/Container.jsx

@@ -17,7 +17,7 @@ export const Container = styled.section`
     margin-top: 50px;
   }
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     display: flex;
     flex-direction: column;
     align-self: center;

src/components/FAQ/Container.jsx

@@ -71,7 +71,7 @@ const Container = styled.section`
     display: none !important;
   }
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     margin-top: 20px;
     padding-right: 0;
     height: 650px;

src/components/FAQ/WindowStyles.jsx

@@ -33,7 +33,7 @@ export const WindowStyles = styled.div`
     color: ${styleVars.m12White};
   }
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     margin: 20px 0px;
     display: flex;
     flex-direction: column;

src/components/Hero/Button.jsx

@@ -38,7 +38,7 @@ export const Button = styled.button`
     align-items: left;
   }
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     font-size: 16px;
     margin: 0px;
     padding: 5px 16px;

src/components/Hero/HeroStyles.jsx

@@ -211,7 +211,7 @@ export const HeroStyles = styled.section`
     margin-bottom: -10px;
   }
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
      .hero__wrapper {
         margin-top: 60px !important;
        padding-top: 10px;

src/components/Involvement/Button.jsx

@@ -31,7 +31,7 @@ export const Button = styled.button`
   }
 
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     margin: 16px auto 8px;
     padding: 5px 16px;
     font-size: 13px;

src/components/Involvement/Container.jsx

@@ -71,7 +71,7 @@ const Container = styled.section`
   }
 
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     margin-top: 20px;
     padding-left: 0;
 

src/components/Involvement/WindowStyles.jsx

@@ -34,7 +34,7 @@ export const WindowStyles = styled.div`
     color: ${styleVars.m12White};
   }
 
-  @media screen and (max-width: ${styleVars.xsUp}) {
+  @media only screen and (max-width: ${styleVars.xsUp}) {
     margin: 20px 0;
     display: flex;
     flex-direction: column;

src/components/Sponsor/Container.jsx

@@ -9,6 +9,30 @@ export const Container = styled.section`
   align-items: center;
   padding-left: 280px;
 
+  .campfire-image {
+  position: absolute;
+  top: -300px;
+  right: 100px;
+  width: 300px;
+  fill: #fd8007; /* base orange fill */
+  filter: drop-shadow(0 0 45px rgba(255, 203, 60, 1));
+  animation: campfire-shine 2.5s infinite ease-in-out;
+}
+
+@keyframes campfire-shine {
+  0%, 100% {
+    filter: drop-shadow(0 0 30px rgba(255, 180, 50, 0.9));
+  }
+  50% {
+    filter: drop-shadow(0 0 60px rgba(241, 241, 0, 1));
+  }
+}
+
+
+
+
+
+
   @media (max-width: 1500px) {
     margin-top: 300px;
 
@@ -20,13 +44,17 @@ export const Container = styled.section`
   @media (max-width: ${styleVars.smUp}) {
     margin-top: 150px;
     padding-right: 100px;
+    .campfire-image {
+      display: none;
+    }
   }
 
   @media (max-width: 480px) {
     margin-top: 100px;
     padding-right: 50px;
   }
 
+
   @media screen and (max-width: ${styleVars.xsUp}) {
     padding: 0;
     display: flex;
@@ -35,6 +63,10 @@ export const Container = styled.section`
     justify-self: center;
     margin-top: 20px;
     width: 80%;
+
+    .campfire-image {
+      display: none;
+    }
   }
 `
 

src/components/Sponsor/Sponsor.jsx

@@ -4,8 +4,11 @@ import Container from "./Container"
 import Content from "./Content"
 import Text from "./Text"
 
+import campfire from "../../assets/images/designs/mchacks13-campfire.svg"
+
 const Sponsor = ({ scrollRef }) => (
   <Container ref={scrollRef}>
+    <img className="campfire-image" src={campfire} alt="campfire image" />
     <Content>
       <Text>
         <h2>Sponsoring McHacks</h2>