diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss index 7af9912..2edb04e 100644 --- a/app/assets/stylesheets/footer.scss +++ b/app/assets/stylesheets/footer.scss @@ -34,17 +34,3 @@ } } -@media only screen and (max-width:768px){ - .footer { - flex-direction: column; - - &-site-explanation { - width: 100%; - } - - &-personal-info { - width: 100%; - padding-top: 18px; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/review_form.scss b/app/assets/stylesheets/review_form.scss index a5f1259..5ff85fa 100644 --- a/app/assets/stylesheets/review_form.scss +++ b/app/assets/stylesheets/review_form.scss @@ -145,22 +145,21 @@ } } -.review-form-container{ - .saved { - width: 100%; - height: 350px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; +.saved { + width: 100%; + height: 350px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; - h1 { - font-size: 30px; - padding: 20px; - } + h1 { + font-size: 30px; + padding: 20px; } } + .new-review { width: 90%; margin: auto; @@ -183,10 +182,6 @@ } @media only screen and (max-width: 768px){ - .review-form-container{ - min-width: 0; - width: 90%; - } .new-review{ h1{ diff --git a/frontend/components/footer/Footer.jsx b/frontend/components/footer/Footer.jsx index c7e71a3..15920b9 100644 --- a/frontend/components/footer/Footer.jsx +++ b/frontend/components/footer/Footer.jsx @@ -4,6 +4,7 @@ import GitHubIcon from '@material-ui/icons/GitHub'; import LanguageIcon from '@material-ui/icons/Language'; import { buttonColor, footerColor } from '../DarkThemeProvider'; import styled from 'styled-components'; +import { useMediaPredicate } from 'react-media-hook'; const source = 'https://docs.google.com/spreadsheets/d/1oE2avtfGQRuSI1-gltcIw-AazA3ov3dEoX-sTbPI6Jw/edit?fbclid=IwAR1T3ttg8PBZ2Ppi5w2J2R1UfUtF6h3eYUM6u7u6xIte9qdtHUz6T12unIc#gid=0'; @@ -46,8 +47,27 @@ const Foot = styled.footer` } } + @media only screen and (max-width:768px){ + flex-direction: column; + + .footer-site-explanation { + width: 100%; + } + + .footer-personal-info { + width: 100%; + padding-top: 18px; + flex-direction: column; + align-items: center; + + & > * { + padding-bottom: 16px; + } + } + } `; + export default function Footer() { return ( diff --git a/frontend/components/reviews/Form.jsx b/frontend/components/reviews/Form.jsx index 6d0b895..ef3a289 100644 --- a/frontend/components/reviews/Form.jsx +++ b/frontend/components/reviews/Form.jsx @@ -17,12 +17,14 @@ import { useDispatch } from 'react-redux'; import Search from './Search'; import { createReview, RECEIVE_REVIEW } from '../../actions/review_actions'; import { capitalize } from '../../util/string_util'; +import { useMediaPredicate } from 'react-media-hook'; const regex = new RegExp(/[^0-9]/, 'g'); const date = new Date(); export default function Form() { + const mobile = useMediaPredicate("(max-width: 768px)") const theme = useTheme(); const styles = makeStyles({ root: { @@ -38,11 +40,11 @@ export default function Form() { container: { display: "flex", - width: "70%", + width: mobile ? "90%" : "70%", margin: "auto", height: "fit-content", alignItems: "center", - minWidth: 700, + minWidth: mobile ? 0 : 700, padding: "20px 0", position: "relative", zIndex: 10, diff --git a/frontend/components/splash/splash_form.jsx b/frontend/components/splash/splash_form.jsx index 4258ff3..4de97f2 100644 --- a/frontend/components/splash/splash_form.jsx +++ b/frontend/components/splash/splash_form.jsx @@ -16,6 +16,10 @@ export default function SplashForm() { zIndex: 4, paddingBottom: 200, background: theme.palette.blobColor, + }, + container: { + width: "100%", + overflow: "hidden" } }); @@ -23,7 +27,9 @@ export default function SplashForm() { return(
- +
+ +

Report Your Wage: