We Keep Coding

Mysterious white space on the right of my left when I scroll to the right

I'm making my portfolio website and since a few days I'm struggling with a problem I have... I searched everywhere on the internet, there were similar problems but I could not solve them (well yes, but it brings me another problem).
Screenshot of my problem
(I specify that the problem is not the size of my navbar, when I remove it I have the same problem)
not clickable
I have a mysterious white space when I scroll to the right and the window is not full screen... I tried all the margin and padding possible and the only solution I found is :
*{
overflow-x :hidden
}
except that it does it on the whole page and then on other elements it cuts them off when they go out of their frame when I don't want to... and so I tried to put the overflow-x hidden individually on all the elements of my page but there is nothing that changes... it only works by putting * ...
I specify that I code with react so the * cuts all the elements of each component and that's not what I want... I put my code below
import React, { useEffect } from 'react';
import profil from "../../media/5847f5bdcef1014c0b5e489c.png"
import Aos from 'aos';
import "./BlocPresentation.css"
import { FaTwitterSquare } from 'react-icons/fa';
import { FaGithubSquare } from 'react-icons/fa';
import { FaLinkedin } from 'react-icons/fa';
import { RiMailFill } from 'react-icons/ri';
import "aos/dist/aos.css";
const BlocPresentation = () => {
useEffect(() => {
Aos.init()
}, []);
return (
<div className="presentation" id='accueil'>
<div className="bloc-photo-presentation"><img className="img-presentation" src={profil} alt="" />
</div>
<div className="pos-texte-presentation">
<div className="bloctexte">
<p className="Bonjour texte">Hello World,</p>
<p className="Prenom texte">Je suis Diego</p>
<p className="etudiant texte">Étudiant en développement Web</p>
</div>
</div>
<div className="div4">
<FaGithubSquare size={22} /></i>
<FaLinkedin size={22} /></i>
<FaTwitterSquare size={22} /></i>
<RiMailFill size={24.5} /></i>
</div>
</div>
);
};
export default BlocPresentation;
CSS :
.presentation {
height: 100vh;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: #1F1D2C;
padding: 0;
margin: 0;
}
.image {
height: 100vh;
}
i {
color: white;
}
.bloc-photo-presentation {
grid-area: 1 / 5 / 6 / 9;
display: flex;
justify-content: center;
align-items: center;
}
.pos-texte-presentation {
grid-area: 1 / 1 / 5 / 6;
}
.div4 {
grid-area: 5 / 1 / 6 / 6;
}
.jesuis {
font-size: 50px;
color: white;
}
.img-presentation {
border: 2px solid black;
border-radius: 55%;
width: 45%;
box-shadow: 0 0 15px 2px black;
}
.div4 {
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 8vw;
}
.texte {
color: white;
text-align: left;
padding-bottom: 4px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.textebloc {
display: flex;
align-items: center;
justify-content: center;
}
.pos-texte-presentation {
display: flex;
align-items: center;
justify-content: center;
}
.Bonjour {
font-size: 5vw;
}
.etudiant {
font-size: 2vw;
}
.Prenom {
font-size: 3vw;
}
#media screen and (max-width:450px) {
.presentation {
height: 100vh;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(11, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 1px solid black;
}
.background-presentation {
grid-area: 1 / 1 / 12 / 8;
;
z-index: -1;
background-color: #1F1D2C;
}
.image {
height: 100vh;
}
i {
color: white;
}
.bloc-photo-presentation {
grid-area: 2 / 3 / 7 / 6;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.pos-texte-presentation {
grid-area: 7 / 2 / 10 / 7;
}
.bloctexte {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.div4 {
grid-area: 10 / 4 / 11 / 8;
}
.img-presentation {
border: 2px solid black;
border-radius: 55%;
width: 140%;
box-shadow: 0 0 15px 2px black;
}
.texte {
color: white;
text-align: center;
padding-bottom: 4px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.Bonjour {
font-size: 10vw;
}
.etudiant {
font-size: 5vw;
}
.Prenom {
font-size: 6vw;
}
}
( yes there must be things not very clean, I am a beginner ;) )

In the devtools there is a little arrow inside a box. It's the second button to the left of "Elements". ctrl + shift + c should hotkey you into it.
With that little selector tool, you can hover around your webpage, hover over that dangling mysterious whitespace and click.
You'll now see the element which is causing your problems. Have a scroll through the CSS and fearlessly change stuff until the whitespace disappears. Good luck!

I finally found the solution! It was the "fade-left" of AOS library... it made me a margin and in fact I had no margin when the elements appeared. So I only had to do .parents { overflow-x: hidden} on the parent elements of the elements with the fade-left effect! And like that no more problems !

How to make banner from static to autoplay with react

I have made some pure banner CSS js with react. Right now it's static not autoplay. How to make my banner autoplay properly and responsive for mobile. Autoplay and smooth transition when going to another banner.
This is the code for working static banner without autoplay things :
import { ArrowLeftOutlined, ArrowRightOutlined } from "#material-ui/icons"
import { useState } from 'react'
import styled from "styled-components"
import {sliderItems} from '../data'
const Container = styled.div`
width: 100%;
height: 80vh;
display: flex;
position: relative;
overflow: hidden;
`
const Arrow = styled.div`
width: 50px;
height: 50px;
background-color: #fff7f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: ${props=> props.direction === "left" && "10px"};
right: ${props=> props.direction === "right" && "10px"};
margin: auto;
cursor: pointer;
opacity: 0.5;
z-index: 2;
`
const Wrapper = styled.div`
height: 100%;
display: flex;
transition: all 1.5s ease;
transform: translateX(${props=>props.slideIndex * -100}vw);
`
const Slide = styled.div`
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
background: ${props => `url(${props.bg}) no-repeat top center`};
`
const ImgContainer = styled.div`
height: 80%;
flex: 1;
`
const Image = styled.img`
height: 80%;
`
const Image2 = styled.img`
height: 40%;
`
const InfoContainer = styled.div`
flex: 1;
padding: 50px;
`
const Title = styled.h1`
color: white;
font-size: 70px;
`
const Desc = styled.p`
color: white;
margin: 50px 0px;
font-size: 20px;
font-weight: bold;
letter-spacing: 3px;
`
const Button = styled.button`
border: 1px solid white;
padding: 10px;
font-size: 20px;
color: #0070ba;
background-color: white;
border-radius: 25px;
cursor: pointer;
font-weight: 800;
&:hover{
color: white;
background-color: #0070ba;
}
`
const Banner = () => {
const [slideIndex, setSlideIndex] = useState(0)
const handleClick = (direction) => {
if(direction==="left"){
setSlideIndex(slideIndex > 0 ? slideIndex-1 : 6)
} else {
setSlideIndex(slideIndex < 6 ? slideIndex +1 : 0)
}
}
return (
<Container>
<Arrow direction="left" onClick={()=>handleClick("left")}>
<ArrowLeftOutlined />
</Arrow>
<Wrapper slideIndex={slideIndex}>
{sliderItems.map(item=>(
<Slide bg={item.bg}>
<Image2 src={item.img2}/>
<InfoContainer>
<Title>{item.title}</Title>
<Desc>{item.desc}</Desc>
<Button>COBA SEKARANG</Button>
</InfoContainer>
<ImgContainer>
<Image src={item.img}/>
</ImgContainer>
</Slide>
))}
</Wrapper>
<Arrow direction="right" onClick={()=>handleClick("right")}>
<ArrowRightOutlined />
</Arrow>
</Container>
)
}
export default Banner
Thank you guys for helping!

react - flex item outside the flex container

When I shrink the page vertically, the flex container become outside the flexbox.
All of my content is supposed to be in the grey area.
I tried to change the height property on css class .App and .App__main, but it doesn't works.
App.js
import "./styles.css";
import Content from "./Content";
export default function App() {
return (
<div className="App">
<div className="App__main">
<Content />
</div>
</div>
);
}
Content.js
import React from "react";
import List from "./List";
import "./styles.css";
export default function Content() {
return (
<>
<div className="layout__container">
<h1 className="layout__container__title">Media</h1>
<List />
</div>
</>
);
}
List.js
import "./styles.css";
import React, { useState } from "react";
export default function List() {
const [list, setList] = useState([
{ id: 1, fileName: "file 1" },
{ id: 2, fileName: "file 2" },
{ id: 3, fileName: "file 3" },
{ id: 4, fileName: "file 4" },
{ id: 5, fileName: "file 5" },
{ id: 6, fileName: "file 6" }
]);
return (
<div className="list">
{list.map((li) => {
return (
<figure title={li.fileName} key={li.id} className={"list__item"}>
<div className="list__item__file">
<div className="list__item__file__name">{li.fileName}</div>
</div>
</figure>
);
})}
</div>
);
}
styles.css
body {
margin: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100vh;
}
.App__main {
display: flex;
height: 100%;
}
/* it's used to save some area for navigation bar */
.App__spacing {
margin-top: 32px;
}
/* list */
.list {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex-grow: 1;
}
.list .list__item {
position: relative;
width: 100px;
height: 100px;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: white;
border: 1px solid white;
overflow: hidden;
flex: 0 0 auto;
}
.list .list__item img {
max-height: 100%;
max-width: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
background-color: #c3c4c7;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
overflow: hidden;
width: 100%;
height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
overflow: hidden;
font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
color: #8c8f94;
font-size: 0.625rem;
text-transform: uppercase;
margin: 0 auto;
}
CodeSandbox:
https://codesandbox.io/s/agitated-dew-rlnw3?file=/src/App.js

The App container with 100vh has a static height and doesn't grow to fit it's content.
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100vh;
}
Use 100% of parent container instead.
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100%;
}

responsiveness in grid error while using styled components

I'm making my portfolio where i have made a react component where i will be using grids from responsiveness. The Grid contains 2 columns, one contains the profile photo and the other contains my skills progress bar.
My grid works just fine on computer screens, but as soon as the screen size shrinks to less than 768px,
the second column suddenly becomes invisible.
below is my react code:
import React from 'react'
import img from '../../images/1cut.png'
import {
AboutContainer,
AboutWrapper,
AboutRow,
Column1,
Column2,
ImgWrapper,
Img,
TextWrapper,
TopLine,
Heading,
Progress,
ProgressDone,
} from './aboutMe2Elements'
const AboutMe2 = (props) => {
return (
<>
<AboutContainer id='about'>
<AboutWrapper>
<AboutRow>
<Column1>
<ImgWrapper>
<Img src={img} alt='Profile Photo' />
</ImgWrapper>
</Column1>
<Column2>
<TextWrapper>
<TopLine>My Skills</TopLine>
<Heading>Frontend Development</Heading>
<Progress>
<ProgressDone width={85}></ProgressDone>
</Progress>
<Heading>Backend Development</Heading>
<Progress>
<ProgressDone width={75}></ProgressDone>
</Progress>
<Heading>Data Structures and Algorithms</Heading>
<Progress>
<ProgressDone width={69}></ProgressDone>
</Progress>
</TextWrapper>
</Column2>
</AboutRow>
</AboutWrapper>
</AboutContainer>
</>
)
}
export default AboutMe2
Here is my styled components code:
import styled from 'styled-components'
export const AboutContainer = styled.div`
color: #fff;
background: #010606;
#media screen and(max-width:768px) {
padding: 100px 0;
}
`
export const AboutWrapper = styled.div`
display: grid;
z-index: 1;
height: 900px;
width: 100%;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
justify-content: center;
`
export const AboutRow = styled.div`
display: grid;
grid-auto-columns: minmax(auto, 1fr);
align-items: center;
grid-template-areas: 'col1 col2';
#media screen and (max-width: 1100px) {
grid-template-areas: 'col1 ' 'col2';
}
`
export const Column1 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col1;
`
export const Column2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
`
export const ImgWrapper = styled.div`
max-width: 555px;
height: 100%;
background: #010606;
`
export const Img = styled.img`
width: 100%;
margin: 0 0 10px 10;
background: #010606;
padding-right: 0;
`
export const TextWrapper = styled.div`
max-width: 540px;
padding-top: 0;
padding-bottom: 60px;
`
export const TopLine = styled.p`
color: #01bf71;
font-size: 20px;
line-height: 16px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 16px;
`
export const Heading = styled.h1`
color: #fff;
margin-bottom: 24px;
font-size: 28px;
line-height: 1.1;
font-weight: 600;
color: #f7f8fa;
#media screen and (max-width: 480px) {
font-size: 32px;
}
`
export const Progress = styled.div`
background-color: #fff;
border-radius: 20px;
position: relative;
margin: 15px 0;
height: 20px;
width: 300px;
`
export const ProgressDone = styled.div`
background: #01bf71;
/* box-shadow: 0 3px 3px -5px #01bf71, 0 2px 5px #01bf71; */
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: ${(props) => (props.width ? props.width + '%' : 0)};
opacity: 1;
transition: 1s ease 0.3s;
`
This is how it looks on on a computer screen
This is how it looks like on a mobile screen

alignment not working in react for footer

I am trying to get a footer properly but I can't get the result, I expect
here is what I expect to have:
below is what I have:
The copyright text is lost somewhere on the right. You can't see it as background is white.
here is the code:
import React, {} from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';
import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';
import SiteLogo from '../assets/images/village-logo.svg';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '#fortawesome/free-brands-svg-icons'
import './Footer.css';
class Footer extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
render() {
return (
<div>
<div className="container">
<Navbar className="navbar" width="100" expand="lg">
<div className="footer-menu">
<div>
<Navbar.Brand href="/">
<img
src= { SiteLogo }
className="logo"
alt="Village"
/>
</Navbar.Brand>
</div>
<div className="subscribe">
<InputGroup className="subscribe-form">
<Form.Control
type="email"
placeholder={TextContents.EmailSubscribe}
className="subscribe-form-control"
/>
</InputGroup>
</div>
<div className="follow-container">
<WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
<p className="follow-text"> {TextContents.Follow} </p>
<FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
<FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
<FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
<FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
</div>
</div>
</Navbar>
</div>
<div>
<p className="copyright-text">{TextContents.Copyright}</p>
</div>
</div>);
}
}
export default Footer;
and the css
.navbar{
background-color: white;
width: 80%;
margin-top: 2%;
margin-bottom: 2%;
font-family: "Fredoka One";
font-size: 18px;
margin: auto;
}
.logo {
width: 214px;
height: 28px;
margin-right: 24;/*theme.spacing(3)*/
}
.container{
display: flex;
box-shadow: none;
background-color: #ffffff;
/*margin-top: 24; /*theme.spacing(3),*/
position: absolute;
bottom: 0;
width: 80%;
height: 2.5rem;
}
.footer-menu {
display: flex;
position: relative;
}
.subscribe {
display: flex;
position: relative;
border-radius: 21px;
background-color: #f4f7f8;
margin-right: 16; /*theme.spacing(2),*/
margin-left: 24; /*theme.spacing(3),*/
width: 467px;
height: 40px;
}
.follow-container {
text-align: center;
align-items: center;
justify-content: center;
margin-left: 16px;/*theme.spacing(2),*/
min-width: 300px;
}
.follow-text {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ff7255;
font-family: Source Sans Pro;
min-width: 75px;
margin-left: 20px;
margin-right: 5px;
}
.follow-icon {
width: 18px;
height: 18px;
margin-right: 2px;
margin-left: 2px;
color: #ff7255;
}
.copyright-text {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffff7255;
font-family: Source Sans Pro;
}
.subscribe-form {
width: 470px;
height: 40px;
border-radius: 20px;
margin-left: 60px;
}
.subscribe-form-control {
font-family: Source Sans Pro;
text-align: left;
color: #cdcece;
background-color: #f4f7f8;
border-style: none;
}
Any idea How to properly center everything and make sure I have 2 lines.
Thanks

The copyright text is lost somewhere on the right. You can't see it as
background is white
Its because .container has position: absolute
You can put copyright div inside container (and apply necessary changes to make it appear below .navbar) or get rid of position: absolute
Any idea How to properly center everything and make sure I have 2
lines.
As you are using display: flex there are two properties which allow you to align stuff in vertical/horizontal way justify-content, align-items ( they depend on flex-direction though )

Using flexbox add to the container div these bootstrap classes d-flex flex-column justify-content-center align-items-center.
Or manually add these styles to a .container selector
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}