I've looked at all the previous questions/answers but none have seemed to work for me.
Im trying to get the background to cover the entire page, however, it does not seem to be working with styled components.
What I want to do is create 3 divs of height: 100vh and width: 100vw and scroll through them.
Below is the code
export const MainContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 0;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: ${(props) => props.color};
overflow: scroll;
`;
And this is how im calling it:
export const MainPage = () => {
return (
<>
<MainContainer color="green" />
<MainContainer color="red" />
<MainContainer color="blue" />
</>
);
};
I've tried using position: fixed and position: absolute. And while they do cover the page, I lost to ability to scroll through the divs (they all end up on top of each other)
This is what its looking like when im scrolling through the page. Any help would be really appreciated.
Related
I am currently working on a website of my own and I'm trying to implement a cool animation on page load, where the navbar fades in, and the center image both fades in and rises up to where it is supposed to be on the page.
I got both of these transitions implemented easily, but the only problem is that when the center image animation acts on the page, it pulls the entire page down, I attached a little clip of it happening on my site to this post.
I would like it so that when the page loads, the animation does not move the entire page down with it, and instead the scroll wheel is at the top at the end of the animation.
My react component:
`
import React from "react";
import tenGreenLogo from "../images/10Green Logo Black (1).png";
import "./HomeContent.css";`
function HomeContent() {
return (
<>
<div className="center-div">
<img src={tenGreenLogo}></img>
</div>
<div className="globe-div">
<div className="globe"></div>
</div>
</>
);
}
export default HomeContent;
`
and my CSS:
`
.center-div {
display: flex;
justify-content: center;
align-items: center;
padding-top: 7rem;
padding-bottom: 7rem;
}
.center-div img {
width: 40rem;
animation: transitionIn 1s;
}
.globe-div {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
padding-bottom: 5rem;
padding-top: 5rem;
}
.globe {
border-radius: 50%;
width: 100rem;
height: 100rem;
background-color: #67cfcf;
display: inline-block;
}
#keyframes transitionIn {
from {
opacity: 0;
transform: translateY(4rem);
}
to {
opacity: 1;
transform: translateY(0rem);
}
}
`
Does anybody know what could be happening here?
I have tried putting the animation property both on the image itself as well as the div it is nested in, but neither of those appear to solve the problem. I am hoping that I can make it so the page does not get pulled down when the animation loads.
Here is my example where I need to put the first component in front of the second.
Currently the second component is in front of the first despite z-index. I tried also to put style on the component tag but it does not work. Where is my mistake ?
First component:
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
z-index: 100;
`;
function Aaa() {
return (
<Container>asd</Container>
)
}
export default Aaa;
Second component
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin-top: -200px;
background: pink;
z-index: 1;
`;
function Bbb() {
return (
<Container>qwe</Container>
)
}
export default Bbb;
App:
function App() {
return (
<>
<Aaa />
<Bbb />
</>
);
}
export default App;
You need position: relative.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
https://www.w3schools.com/cssref/pr_pos_z-index.asp
E.g.
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin-top: -200px;
background: pink;
z-index: 1;
`;
function Bbb() {
return (
<Container>qwe</Container>
)
}
export default Bbb;
I dont know why it not work,this seems no reason.But what ever, maybe you could use this instead:
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
transform: translateY(0px);
`;
function Aaa() {
return (
<Container>asd</Container>
)
}
export default Aaa;
Try adding a container for the components instead of fragment and apply display: flex and flex-direction: column on that container and see if it works. Edit: Code sandbox with fix: https://codesandbox.io/s/floral-frog-fie10?file=/src/Aaa.js
i'm doing an app and i need help !
I made a modal window, and that modal window will be bigger than 100vh, and i need it to have an scroll-bar, and i give it a scroll bar, but the problem is that, the other main scroll-bar needs to be cut, but i jus don't know how eliminate it
Here's the css code of my modal window, i'm usign styled-components in react
import styles from "styled-components";
// TODO Part
export const TodoMain = styles.section`
width: 100%;
min-height 100vh;
overflow-x: hidden;
overflow-y: auto;
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
`;
export const Todo = styles.div`
width: 80%;
min-height: 150vh;
margin: auto;
border: 3px solid black;
`;
i want to apply justify-content: center property to Cards Component only when if it only one Card component inside it.
below is my code,
function Parent() {
const order = //some array of objects
return (
<Cards>
{orders.map((order, index) => {
return (
<Card order={order} />
);
)}}
</Cards>
);
}
const Cards = styled.div`
display: flex;
flex-wrap: wrap;
min-height: calc(${256 * 1.5});
padding: 0 calc(50vw - 600px);
#media screen and (max-width: 1320px) {
width: 100vw;
padding: 0 calc(50vw - 400px);
}
`;
const Card = styled.div`
max-width: 356px;
height: 256px;
width: calc(33.33% - 16px);
#media screen and (max-width: 1320px) {
width: calc(50% - 16px);
}
margin: 8px;
display: flex;
flex-direction: column;
align-items: flex-end;
`;
This works fine when they are many cards. but when there is only one card the card is not centered to the Cards div.
if i add justify-content: center to the Cards div then it works fine when there is only one card. but when multiple cards say three cards in total, the two cards will fit in first row and third card will be in next row with its position centered to cards div.
so i tried adding :only-child selector to the cards div and it still behaves the same with third card centered to the cards div where i would expect it to be positioned just under the first card in first row.
what i have tried is below
const Cards = styled.div`
display: flex;
flex-wrap: wrap;
min-height: calc(${256 * 1.5});
padding: 0 calc(50vw - 600px);
#media screen and (max-width: 1320px) {
width: 100vw;
:only-child { //added this
justify-content: center;
}
padding: 0 calc(50vw - 400px);
}
`;
const Card = styled.div`
max-width: 356px;
height: 256px;
width: calc(33.33% - 16px);
#media screen and (max-width: 1320px) {
width: calc(50% - 16px);
}
margin: 8px;
display: flex;
flex-direction: column;
align-items: flex-end;
`;
below is how it looks with code above
with three cards
[![enter image description here][1]][1]
with one card
want it to like below
with 3 cards
with one card
could someone help me with this. thanks.
Try this way
function Parent() {
const orders = [] //some array of objects
return (
<Cards itemsCount={orders.length}> // item count prop here
{orders.map((order, index) => {
return (
<Card order={order} />
);
)}}
</Cards>
);
}
const Cards = styled.div`
justify-content: ${props => (props.itemsCount == 1 ? "centre" : "flex-start")};
display: flex;
flex-wrap: wrap;
min-height: calc(${256 * 1.5});
padding: 0 calc(50vw - 600px);
#media screen and (max-width: 1320px) {
width: 100vw;
padding: 0 calc(50vw - 400px);
}
`;
While you probably can do something like that with pure css, you might find it easier to have javascript help out a bit. I'm not sure which css-in-js library you're using, but they usually have a way to dynamically compose multiple styles together. As a generic example:
function Parent() {
const order = //some array of objects
return (
<Cards className={orders.length > 0 ? extraStyle : ''}>
{orders.map((order, index) => {
return (
<Card order={order} />
);
)}}
</Cards>
);
}
I am trying to use the blur effect in css to blur the background and z-index to stack the logo on the blurred image but the same is not happening my logo is down under the blurred background.Please let me know the issue.
Styled component heirarchy:
<LandingPageContainer>
<Background />
<LandingPageContentContainer>
<Logo src={piattoLogo} />
<ContentContainer>
<Content>Premium handcrafted delicacies</Content>
<Button>Lets go!</Button>
</ContentContainer>
</LandingPageContentContainer>
</LandingPageContainer>
import styled from 'styled-components';
import landingBackground from '../../../../../img/piatto/CustomerLanding/CustomerLanding.jpg';
export const LandingPageContainer = styled.div`
display: block;
width: 100%;
height: 812px;
background-color: #0d0c0c;
`;
export const Background = styled.div`
width: 390px;
height: 526px;
left: -326px;
top: -80px;
filter: blur(2px);
background: url(${landingBackground}) no-repeat center center/cover;
`;
export const LandingPageContentContainer = styled.div`
display: block;
margin: auto;
padding: auto;
text-align: center;
margin-top: -130px;
z-index: 2;
`;
export const Logo = styled.img`
width: 201px;
height: 164px;
`;
`;
Remember z-index only works on positioned elements (relative, absolute, sticky, fixed).