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;
`
Just add a style property to parent div and it should work.
<div style={{ overflowX: "hidden" }}>
<NavAppBar/>
<Hero/>
<Hero1/>
<Hero2/>
<Hero3/>
</div>
example
Related
Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
Currently, I am trying to make my site responsive.But even though now it works well for (1440x760) but when the height increases i get a blank position at the end.
Why is it appearing and how can i get rid of that here and in future instances.
Live Site Link - https://mustakabsarkhan.github.io/ip-address-tracker/
SCSS Code -
html{
box-sizing: border-box;
font-size: 100%;
};
*,
*::before,
*::after{
box-sizing: inherit;
margin: 0;
padding: 0;
};
body{
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
font-family: 'Rubik', sans-serif;
background: url(../../images/pattern-bg.png);
};
.main-body{
display: flex;
flex-direction: column;
text-align: center;
& .ip-header{
margin-top: 2%;
color: p.color(simple-white);
font-size: p.pxtovw(35);
};
& .search-bar{
display: flex;
justify-content: center;
text-align: left;
& >input{
padding-left: 20px;
};
& #searchbox{
height: p.pxtovh(50);
width: p.pxtovw(490);
//margin-right: 6.3%;
margin-left: 4%;
border-radius: 13px 0 0 13px;
border: none;
margin-top: 1%;
};
& .searchbox-button{
margin-top: 1%;
height: p.pxtovh(50);
width: p.pxtovw(50);
background-color: black;
border: none;
border-radius: 0 13px 13px 0;
margin-right: 55px;
};
& button:active {
opacity: 0.7;
transform: translateY(1px);
border: inherit;
border: 2px solid black;
};
};
& .main-container{
width: 100%;
& .content-bar{
background: p.color(simple-white);
display: flex;
border-radius: 15px;
justify-content: center;
width: 74%;
margin-left: 13%;
padding: 2%;
text-align: left;
margin-top: 2%;
gap:3%;
& .line{
border-left: p.pxtovw(2) solid p.color(dark-grey);
height: p.pxtovh(90);
margin-top: 1%;
};
& >div>label{
font-size: p.pxtovw(14);
color: p.color(dark-grey);
};
& >div>p{
font-size: p.pxtovw(24);
};
};
& .sub-content-bar{
display: flex;
flex-direction: column;
& .sub-content-bar-content{
z-index: 9;
position: absolute;
display: flex;
justify-content: center;
gap:10%;
text-align: center;
margin-top: 1%;
padding: 1%;
background-color: p.color(simple-white);
width: 50.6%;
margin-left: 24.5%;
border-radius: 15px;
& .flags>img{
margin-top: 5px;
width: p.pxtovw(64);
};
& >div>label{
font-size: p.pxtovw(14);
color: p.color(dark-grey);
};
& >div>p{
font-size: p.pxtovw(24);
};
};
};
& #map {
z-index: 2;
position: relative;
height: calc(656px - 20vw);
width: 100%;
margin-top: 4.6%;
};
};
};
add this to your .main-body class
justify-content: space-between;
min-height: 100vh;
Changing map height with vh has helped to solved the issue. Previously, due to using height: calc(656px - 20vw) the map couldn't get bigger than 656px.
Also Thanks to #AdamUK73 for pointing out the exact reason.
Solution Code-
& #map {
z-index: 2;
position: relative;
height: calc(p.pxtovh(656) - 20vw);
width: 100%;
margin-top: 4.6%;
};
I have here a problem on overlapping the button on another button.
I wanted to follow the pic I've attached below
Codesandbox CLICK HERE
const MainButton = styled.button`
border-radius: 50%;
border: 2px solid red;
position: relative;
background-color: #fff;
display: block;
width: 40px;
height: 40px;
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
const IconButton = styled.button`
border-radius: 50%;
border: 2px solid red;
position: absolute;
background-color: #fff;
display: block;
width: 22px;
height: 22px;
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
In order to absolutely position IconButton relative to MainButton it needs to be rendered as a child of MainButton.
<MainButton type="button">
<img
src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"
alt="test"
/>
<IconButton>+</IconButton>
</MainButton>
Next adjust the positioning of IconButton.
const IconButton = styled.span` // <-- use span since nesting button is invalid
background-color: #fff;
border-radius: 50%;
border: 2px solid red;
cursor: pointer;
position: absolute;
display: block;
width: 22px;
height: 22px;
line-height: 22px; // <-- center text vertically
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
left: 50%; // <-- position halfway across parent
bottom: 0; // <-- position at bottom of parent
transform: translate(-50%, -50%); // <-- translate to center button
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
Remove the overflow: hidden; rule on parent MainButton.
Update
Move the image to be a background image and tweaked the positioning.
const MainButton = styled.button`
border-radius: 50%;
border: 2px solid red;
position: relative;
background-color: #fff;
background-image: ${({ src }) => `url(${src});`}
background-position: center center;
background-size: contain;
display: block;
width: 40px;
height: 40px;
position: relative;
margin-bottom: 0.5rem;
cursor: pointer;
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
const IconButton = styled.div`
background-color: #fff;
border-radius: 50%;
border: 2px solid red;
cursor: pointer;
position: absolute;
display: block;
width: 22px;
height: 22px;
line-height: 22px;
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
text-align: center;
user-select: none;
left: 50%;
top: 100%;
transform: translate(-50%, -50%);
& > img {
width: 100%;
height: 100%;
object-fit: contain;
}
`;
i'm trying to made this in react native,
I tried to had a square and an oval, i tried to have border radius in a singular square, but everytime i cannot reach this result.
This is what i tried, but as i said i don't know how to reach this
export const StyledText = styled.Text`
text-align: center;
font-family: ${FONTS.fontFamily.bold};
font-size: 29px;
color: white;
`;
export const StyledContainer = styled.View`
align-items: center;
justify-content: center;
height: 250px;
`;
export const StyledOval = styled.View`
width: 110%;
height: 150px;
border-radius: 100-5;
border-width: 10;
background-color: red;
border-color: black;
position: absolute;
top: 50;
z-index: 10;
`;
export const StyledSquare = styled.View`
flex: 1;
align-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
z-index: 11;
`;
I am currently trying to center favicons in this circular background so it can change color on hover. I am struggling a little bit to center it, though. I tried text-align: center but that was no use. Not very up to speed with CSS. What should I be doing instead?
https://codepen.io/teecp/pen/gOYRwbO
One way to solve this problem is to set fixed height and width on the parent element. Then set the icon's dimensions the same with a line height that measures its height.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 20%;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
/* Added the properties below */
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar .fas:hover {
background: #ffffff1a;
border-radius: 90px;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
/* Added the block below */
.fa, .far, .fas {
font-family: "Font Awesome 5 Pro";
line-height: 50px!important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<i class="fas fa-home"></i>
<i class="fas fa-chess-queen"></i>
<div id="main">
hello
</div>
Remove padding, add width, height and line-height.
.sidebar a {
position: relative;
left: 20%;
height: 50px;
width: 50px;
line-height: 55px;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
color: #ffffff;
display: block;
margin-bottom: 10px;
}