For reasons I cannot identify overflow: hidden has decided not to work for my react application, at first yesterday or day before it worked and then for reasons I do not know it was not working and the X axis scroll was appearing. Then I came back next day to work on it and overflow: hidden was working as there was no x-axis scroll.
Today I have been working on the project fine, and then I restarted my laptop because npm was not installing part of material-ui's npm installations, it just paused halfway through. After restarting my laptop I tried to install again and worked fine, however now the overflow: hidden does not work as the scrolls on each axis have appeared.
I am very confused because my npm has been playing up and I have no idea why this would affect my css-styled components as their have been no code changes. Earlier on when I ran npm start it threw an error that I had not seen before so I ran npm update, and then npm start worked. I also constantly get those red warnings of a certain number of issues that need auditing whenever I install anything through npm now which I never use to get.
Sandbox Link Here
I am developing it mobile first (Iphone 8/8plus size) so toggle the responsive view otherwise will look odd and might not make sense (haven't done media queries yet)
For context when it was working fine the Y-axis scroll was on because the site is scrollable vertically just should not be scrolling horizontally
I put overflow: hidden on all the containers now to try and get rid of horizontal scroll but no change
Because codepen does not work here are the main code files:
App.js
import React from 'react';
import Styled from 'styled-components';
import website from '../src/Assets/website (1).svg';
import development from '../src/Assets/development.svg';
import design from '../src/Assets/maintenance.svg';
import develop from '../src/Assets/code.svg';
import deploy from '../src/Assets/upload.svg';
import { Hero } from './Components/Hero';
import { Hero1 } from './Components/Hero1';
import { Hero2 } from './Components/Hero2';
import { Hero3 } from './Components/Hero3';
import NavAppBar from './Components/Navigation'
import '@fontsource/roboto';
function App() {
return (
<div>
<NavAppBar/>
<Hero/>
<Hero1/>
<Hero2/>
<Hero3/>
</div>
);
}
export default App;
Hero.js
import React from 'react'
import Styled from 'styled-components';
import development from '../Assets/development.svg';
import design from '../Assets/maintenance.svg';
import develop from '../Assets/code.svg';
import deploy from '../Assets/upload.svg';
export const Hero = () => {
return (
<div>
<Container>
<Title>
Translating Business ideas to an professional online presence
</Title>
<WebsiteSvg/>
<Subtitle>
The Full Front-End Package
</Subtitle>
<Design>
Design
</Design>
<DesignSvg/>
<Develop>
Develop
</Develop>
<DevelopSvg/>
<Deploy>
Deploy
</Deploy>
<DeploySvg/>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
`
const Title = Styled.div`
position: absolute;
width: 212px;
height: 157px;
left: 8%;
top: 51px;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
display: flex;
align-items: center;
color: #000000;
`
const WebsiteSvg = Styled.div`
position: absolute;
width: 151px;
height: 162px;
left: 55%;
top: 14%;
background-position: center;
background-size: cover;
background-image: url(${development});
transform: rotate(38.43deg);
`
const Subtitle = Styled.div`
position: absolute;
width: 171px;
height: 35px;
left: 10%;
top: 189px;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 28px;
/* or 233% */
display: flex;
align-items: center;
color: #000000;
`
const Design = Styled.div`
position: relative;
width: 64px;
height: 37px;
/* left: 40%; */
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 45%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const Develop = Styled.div`
position: relative;
width: 64px;
height: 37px;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 55%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const Deploy = Styled.div`
position: relative;
width: 64px;
height: 38px;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
top: 65%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 28px;
/* or 280% */
display: flex;
align-items: center;
color: #000000;
`
const DesignSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 4%;
top: 53%;
background-position: center;
background-size: cover;
background-image: url(${design});
transform: rotate(38.43deg);
`
const DevelopSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 35%;
top: 63%;
background-position: center;
background-size: cover;
background-image: url(${develop});
/* transform: rotate(-28.43deg); */
`
const DeploySvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 67%;
top: 74%;
background-position: center;
background-size: cover;
background-image: url(${deploy});
/* transform: rotate(-28.43deg); */
`
Hero1.js
import React from 'react'
import Styled from 'styled-components';
import webDesign from '../Assets/webDesign.svg';
import devices from '../Assets/devices.svg';
import profile from '../Assets/profile.svg';
export const Hero1 = () => {
return (
<div>
<Container>
<Title>
Services
</Title>
<ServicesBox>
<DesignSubtitle>
UI/UX Design
</DesignSubtitle>
<DesignSvg/>
<DesignText>
Experience designing with professional UI/UX principles utilising Figma
</DesignText>
<WebSubtitle>
Web Development
</WebSubtitle>
<DevicesSvg/>
<WebText>
Building Responsive and scalable websites and web apps with React
</WebText>
<MobileSubtitle>
Mobile Apps
</MobileSubtitle>
<ProfileSvg/>
<MobileText>
Building mobile webapps, lightning fast and no download required!
</MobileText>
</ServicesBox>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
background-color: #DEEEEA;
`
const Title = Styled.div`
position: relative;
width: 253px;
height: 45px;
top: 8%;
/* margin-right: auto;
margin-left: auto;
vertical-align: middle; */
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 28px;
align-items: center;
text-align: center;
color: #000000;
`
const ServicesBox = Styled.div`
position: absolute;
display: flex
justify-content: center;
align-items: center;
top: 13%;
height: 525px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
/* background-color: #DEEEEA; */
border-radius: 70% 20% 60% 40%;
/* opacity: 50%; */
`
const DesignSubtitle = Styled.div`
position: relative;
width: 108px;
height: 36px;
left: 37.5%;
top: 5%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
/* or 233% */
align-items: center;
color: #000000;
`
const WebSubtitle = Styled.div`
position: absolute;
width: 108px;
height: 36px;
left: 32.5%;
top: 40%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
/* or 233% */
align-items: center;
color: #000000;
`
const MobileSubtitle = Styled.div`
position: absolute;
width: 108px;
height: 36px;
left: 37.5%;
top: 75%;
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 28px;
align-items: center;
color: #000000;
`
const DesignSvg = Styled.div`
position: relative;
width: 95px;
height: 95px;
left: 3%;
top: 5%;
background-position: center;
background-size: cover;
background-image: url(${webDesign});
`
const DevicesSvg = Styled.div`
position: absolute;
width: 100px;
height: 100px;
right: 3%;
top: 49%;
background-position: center;
background-size: cover;
background-image: url(${devices});
`
const ProfileSvg = Styled.div`
position: absolute;
width: 95px;
height: 95px;
left: 5%;
top: 85%;
background-position: center;
background-size: cover;
background-image: url(${profile});
transform: rotate(-12.43deg);
`
const DesignText = Styled.div`
position: absolute;
width: 185px;
left: 38%;
top: 18%;
font-family: Noto Sans;
font-style: bold;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
const WebText = Styled.div`
position: absolute;
width: 175px;
left: 1%;
top: 55%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
const MobileText = Styled.div`
position: absolute;
width: 165px;
left: 41%;
top: 90%;
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 16px;
/* or 140% */
align-items: center;
text-align: center;
`
Hero2.js
import React from 'react'
import Styled from 'styled-components';
import diagram from '../Assets/diagram.svg'
import structure from '../Assets/structure.svg'
import js from '../Assets/js-format.svg'
import html from '../Assets/file.svg'
import css from '../Assets/css.svg'
export const Hero2 = () => {
return (
<div>
<Container>
<Title>
Web Development Skills
</Title>
<SkillsSvg/>
<SkillBox>
<ReactSvg/>
<JsSvg/>
<HtmlSvg/>
<CssSvg/>
</SkillBox>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
background-color: #DBE6FD;
`
const SkillBox = Styled.div`
position: absolute;
display: flex
justify-content: center;
align-items: center;
top: 35%;
height: 400px;
width: 300px;
margin-left: 5%;
margin-right: 5%;
`
const Title = Styled.div`
position: absolute;
width: 180px;
height: 157px;
right: 8%;
top: 8%;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
/* or 140% */
display: flex;
align-items: center;
text-align: center;
color: #000000;
`
const SkillsSvg = Styled.div`
position: absolute;
width: 137px;
height: 149px;
left: 29px;
top: 10%;
background-position: center;
background-size: cover;
background-image: url(${diagram});
`
const ReactSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 45%;
top: 5%;
background-position: center;
background-size: cover;
background-image: url(${structure});
transform: rotate(28.42deg);
`
const JsSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 70%;
top: 30%;
background-position: center;
background-size: cover;
background-image: url(${js});
transform: rotate(28.42deg);
`
const HtmlSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 10%;
top: 38%;
transform: rotate(-25.03deg);
background-position: center;
background-size: cover;
background-image: url(${html});
`
const CssSvg = Styled.div`
position: absolute;
width: 75px;
height: 79px;
left: 45%;
top: 65%;
background-position: center;
background-size: cover;
background-image: url(${css});
transform: rotate(26.96deg);
`
Hero3.js
import React from 'react'
import Styled from 'styled-components';
export const Hero3 = () => {
return (
<div>
<Container>
<Title>
Portfolio
</Title>
</Container>
</div>
)
}
const Container = Styled.div`
position: relative;
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
justify-content: center;
/* height: 100%;
overflow: hidden; */
/* background-color: #DBE6FD;
background-color: #DEEEEA; */
`
const Title = Styled.div`
position: absolute;
width: 180px;
height: 157px;
right: 8%;
top: 8%;
font-family: Noto Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 28px;
/* or 140% */
display: flex;
align-items: center;
text-align: center;
color: #000000;
`
Appcomponent which has teh default text. Hero* components are nowhere