Header mobile styling

3 files changed, 10 insertions, 10 deletions

diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx
index 0eac4a53f..37aabcd10 100644
--- a/packages/website/ts/@next/components/hamburger.tsx
+++ b/packages/website/ts/@next/components/hamburger.tsx
@@ -27,7 +27,7 @@ const StyledHamburger = styled.button<Props>`
     outline: none;
     user-select: none;
 
-    @media (min-width: 768px) {
+    @media (min-width: 800px) {
         display: none;
     }
 
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 6e9616e21..7660c0d40 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -157,14 +157,14 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 export const Header = withTheme(HeaderBase);
 
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
         overflow: hidden;
         position: relative;
         transition: min-height 0.25s ease-in-out;
     }
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         background-color: ${props => props.theme.bgColor};
     }
 `;
@@ -184,7 +184,7 @@ const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
 
-  @media (max-width: 768px) {
+  @media (max-width: 800px) {
       padding-top: 0;
       display: flex;
       padding-bottom: 0;
@@ -196,7 +196,7 @@ const StyledButtonWrap = styled.div`
     align-items: center;
     justify-content: space-between;
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         background-color: #022924;
         display: flex;
         flex-wrap: wrap;
@@ -216,7 +216,7 @@ const StyledButtonWrap = styled.div`
 const MobileProductLinksWrap = styled(StyledButtonWrap)`
     display: none;
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         display: block;
         background-color: transparent;
         flex-direction: column;
@@ -235,7 +235,7 @@ const LinkWrap = styled.div`
         display: block;
     }
 
-    @media (min-width: ${BREAKPOINTS.mobile}) {
+    @media (min-width: 800px) {
         &:hover > div {
             display: block;
             visibility: visible;
@@ -291,7 +291,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
 `;
 
 const Nav = styled.div`
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 800px) {
         background-color: ${colors.brandDark};
         position: absolute;
         top: 0;
@@ -304,7 +304,7 @@ const Nav = styled.div`
 const TradeButton = styled(Button)`
     padding: 14px 22px;
 
-    @media (max-width: ${BREAKPOINTS.mobile}) {
+    @media (max-width: 928px) {
         display: none;
     }
 `;
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index a2af8b982..20cab0828 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -16,7 +16,7 @@ const StyledLogo = styled.div`
     text-align: left;
     position: relative;
 
-    @media (max-width: 768px) {
+    @media (max-width: 800px) {
         z-index: 2;
 
         svg {