Container with the icons
i want to display none everything in the container except the Avatar.
code and picture as support
ThanksCode of the Container
<RightContainer>
<IconButton>
<NotificationsIcon style={{ color: "#b1bdb4" }} />
</IconButton>
<IconButton>
<img src="/images/work.svg" alt="" />
</IconButton>
<AvatarProfile src="https://lh3.googleusercontent.com/ogw/ADGmqu92jhn39aYEn_N3jFj7cmQkvGBDfgbz53Lmv_8z3Q=s32-c-mo" />
</RightContainer>
const RightContainer = styled.div`
flex: 0.15;
display: flex;
align-items: center;
justify-content: space-around;
#media (max-width: 520px) {
display: none;
}
`;
Related
I am creating an image slider in React. I'm using Material UI arrow icons as the left and right buttons.
Everything is working fine until I try and add padding.
Before adding the padding, I can see two white circles with my arrows. As soon as I add the padding, the white circles get bigger but the arrows inside disappear.
return (
<div className="container">
<div
className="slider"
style={{ transform: `translateX(-${currentSlide * 100}vw)` }}
>
<img src={images[0]} alt="" />
<img src={images[1]} alt="" />
<img src={images[2]} alt="" />
<img src={images[3]} alt="" />
</div>
<div className="arrows">
<KeyboardArrowLeftOutlinedIcon className="arrow" onClick={prevSlide} />
<KeyboardArrowRightOutlinedIcon className="arrow" onClick={nextSlide} />
</div>
</div>
)
And this is the sass file:
.container {
width: 100vw;
height: 60vh;
overflow: hidden;
position: relative;
.slider {
width: 400vw;
height: 100%;
display: flex;
transition: all 1s ease;
img {
width: 100vw;
height: 100%;
object-fit: cover;
}
}
.arrows {
position: absolute;
height: 100%;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 80%;
top: 0;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
padding: 1em;
}
}
}
It seems that a possible solution could be wrap the arrow icons with div, and style the wrapper.
Minimized demo of below example on: stackblitz (without functionality, and uses plain CSS)
Example:
<div className="arrows">
<div className="arrow">
<KeyboardArrowLeftOutlinedIcon />
</div>
<div className="arrow">
<KeyboardArrowRightOutlinedIcon />
</div>
</div>
Also some changes in Sass would be needed to match it, such as:
.arrows {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
margin: 0.75em;
padding: 0.5em;
display: flex;
justify-content: center;
align-items: center;
}
}
I am using a clicked state for 3 components, when each component is clicked, it will set the state to e.g 1,2,3.
This is pretty basic but it looks like this.
const [selectedTemplate, setSelectedTemplate] = useState(0)
<TemplateContainer>
<DummyTemplateImage
onClick={() => {
setSelectedTemplate(1);
}}
>
<ImageContainer src={General}/>
</DummyTemplateImage>
<Typography variant="h5" fontSize="18px" color="primary">
Text!!
</Typography>
<Typography variant="subtitle4" color="black">
Text!
</Typography>
</TemplateContainer>
Pretty simple. However, when the box is selected, e.g you select option 1, i'd like it to change the background to be green.
This is my styled-component.
const TemplateContainer = styled.div`
width: 35%;
height: 100%;
border-radius: 0.5em;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
`;
How would I drive this?
I am trying to allow the navbar to take you to each part of the website but it isnt working for some reason. It is only a one page website and I have another up & running website with the same Example it takes me right to the section, but on this website it just doesnt seem to work does anyone have a clue? Heres my code from navbar.jsx and a link to the github
https://github.com/Justin7933/chidgo
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
height: 50px;
`;
const Wrapper = styled.div`
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
`;
const Left = styled.div`
width: 60%;
display: flex;
align-content: center;
justify-content: space-between;
`;
const Logo = styled.h1`
font-weight: bold;
text-decoration: underline crimson;
`;
const Menu = styled.nav`
display: flex;
list-style: none;
cursor: pointer;
#media only screen and (max-width: 480px) {
display: none;
}
`;
const MenuItem = styled.a`
margin-right: 30px;
font-size: 20px;
font-weight: bold;
color: gray;
text-decoration: none;
`;
const Button = styled.button`
border:2px solid white;
padding: 10px 15px;
background-color: crimson;
color: white;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
`;
const Navbar = () => {
return (
<Container>
<Wrapper>
<Left>
<Logo>chidgo</Logo>
<Menu>
<MenuItem href="#intro">Home</MenuItem>
<MenuItem href="feature">Features</MenuItem>
<MenuItem href="#service">Services</MenuItem>
<MenuItem href="#price">Pricing</MenuItem>
<MenuItem href="#contact">Contact</MenuItem>
</Menu>
</Left>
<Button>JOIN TODAY</Button>
</Wrapper>
</Container>
)
}
export default Navbar
To be honest, I dont master the way that you coded yet, so I might embarrass mysef for lack of knowledge, but, have being said that:
Are you not forgeting to wrapp the proprer places with a < section id="">? Like is show here in the code of your contact componet:
<Container>
==>>>> <section id="contact">
<Wrapper>
<FormContainer>
<Title>
Questions? <br /> Let's Get In Touch
</Title>
<Form onSubmit={onSubmit}>
<LeftForm>
<Input name="from_name" value={toSend.from_name}
onChange={handleChange} placeholder="Your Name" />
<Input name="reply_to" value={toSend.reply_to}
onChange={handleChange} placeholder="Your Email" />
<Input placeholder="Subject" />
</LeftForm>
<RightForm>
<textarea name="message" className="TextArea" maxLength="100" value={toSend.message}
onChange={handleChange} placeholder="Your Message"/>
<Button type="submit">Send</Button>
</RightForm>
</Form>
</FormContainer>
<AddressContainer>
<AddressItem>
<Icon src={Map} />
<Text>Plymouth County, Hanson, Massachusetts</Text>
</AddressItem>
<AddressItem>
<Icon src={Phone} />
<Text>+7812175728</Text>
</AddressItem>
<AddressItem>
<Icon src={Send} />
<Text>damon.justin#outlook.com</Text>
</AddressItem>
</AddressContainer>
</Wrapper>
===>>> </section>
</Container>
At least, I had looked for thoose "targets" from your navebar and I have not found them in any file.
I want to make a page like this picture. To do this, I want to center the part drawn in blue, but my code doesn't work properly. What's wrong? Any advice would be appreciated.
import {
Col, Row,
} from 'react-bootstrap';
const content=css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const imageContianer=css`
width: 100%;
height: 60%;
`;
const About =()=>{
return (
<div css={content}>
<p>Who am I ?</p>
<div css={imageContianer}>
<Row>
<Col>
<img
src={ Icon }
width='200'
height='180'
alt='Icon' />
</Col>
<Col>
<p>First</p>
<p>Second</p>
<p>Third</p>
</Col>
</Row>
</div>
</div>
);
}
This is the result. The "Who am i" part even appears in the container above. What's the problem?
import {
Col, Row,
} from 'react-bootstrap';
const content=css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const imageContianer=css`
width: 100%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
`;
const rowContainer=css`
flex: 0 0 60% !important;
align-items: center;
justify-content: center;
`;
const About =()=>{
return (
<div css={content}>
<p>Who am I ?</p>
<div css={imageContianer}>
<Row css={rowContainer}>
<Col>
<img
src={ Icon }
width='200'
height='180'
alt='Icon' />
</Col>
<Col>
<p>First</p>
<p>Second</p>
<p>Third</p>
</Col>
</Row>
</div>
</div>
);
}
Hopfully code above can solve your problem. basicly you need to know how flex work, it's just like how grid on bootstrap css framwork does.
note: i haven't use styled-components like you do using css but i just follow your code example.
Playground
Leave a comment if my answer didn't working out the way want
When on mobile screen sizes, the image gets responsive to a time where the image gets cut and is no more responsive.
I will show code and image for clarification.
const SignIn = ({ setDisplayScreen }: Props) => (
<ScreenDiv>
<ImageContainer>
<FirstImageDiv />
</ImageContainer>
<FormDiv>
<SignInInput placeholder="Username" />
<SignInInput placeholder="Password" />
<SignUpButton
style={{
cursor: 'pointer',
}}
>
Sign in
</SignUpButton>
<ForgotUserNameParagraph>
Forgot username or password
</ForgotUserNameParagraph>
<SignUpParagraph
style={{ cursor: 'pointer' }}
onClick={() => setDisplayScreen('SignUpOptions')}
>
Don’t have an account? Sign up
</SignUpParagraph>
</FormDiv>
</ScreenDiv>
);
export default SignIn;
image component
import styled from 'styled-components';
import { signin, mobileSignin } from '../../assets/images';
import device from '../../config/device';
const FirstImageDiv = styled.div`
background-image: url(${signin});
float: left;
background-size: cover;
display: flex;
justify-content: flex-end;
background-repeat: no-repeat;
flex-direction: column;
width: 100%;
height: 100vh;
#media ${device.mobileS} {
background-image: url(${mobileSignin});
width: 100%;
height: 34.3vh;
background-size: cover;
justify-content: flex-end;
}
`;
export default FirstImageDiv;
I tried to use background size contain it becomes to small and outside the context of the div
What can I do for it to continue displaying correctly like the responsive one.
what css tricks could be use to fix the situation?