I have made an About Us page on which I want an image to be shown on the right of the page, which when viewed on phone, goes down to the bottom of screen.
Here is the JS and CSS file of the React Component that I am making.
aboutUS.js
import './AboutUs.css'
import TeamCard from '../../components/TeamCard'
export default function AboutUs() {
const members = [
{ name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' },
{ name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' }
]
return (
<div className='about-us-div'>
<div className='content'>
<h1 style={{ marginBottom: '30px' }}>About Us</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?</p>
</div>
<div className="cc-cards">
{members.map((member, index) => <TeamCard key={index} name={member.name} link={member.link} imageLink={member.imageLink} />)}
</div>
<img className='logo-image' src="https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg" alt="" />
</div>
)
}
AboutUS.css
.about-us-div{
color: white;
}
.content {
max-width: 600px;
margin: 30px 80px 60px;
}
.cc-cards{
display: flex;
flex-wrap: wrap;
margin-left: 60px;
margin-top: -20px;
}
@media(max-width: 710px){
.cc-cards{
justify-content: center;
padding-bottom: 30px;
}
}
The image should be placed on the right blank space when viewed on larger screen whereas at the bottom in case of phone screen. Here is the sample with image not positioned
I tried using flex on the parent div but still I am not getting what I wanted.
It would be very helpful if you could share your code snippet. I find it challenging to determine the complete layout of your project by examining your code alone. However, I was able to quickly create a layout on the sandbox by referring to your screenshot. For additional information, please visit the link. Thank you.
I have also shared the code snippet. Kindly follow through with the code.
About Us Component
import "./aboutUs.css";
// import TeamCard from "../../components/TeamCard";
export default function AboutUs() {
const members = [
{
name: "Bhavesh",
link: "https://developer.mozilla.org/en-US/",
imageLink:
"https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg"
},
{
name: "Bhavesh",
link: "https://developer.mozilla.org/en-US/",
imageLink:
"https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg"
}
];
const cardWrapper = {
width: "160px",
height: "260px",
padding: "1rem",
marginRight: "1.5rem",
borderRadius: "15px",
backgroundColor: "#3b3b3b"
};
return (
<div className="about-us-div">
<div className="content">
<div>
<h1 style={{ marginBottom: "30px" }}>About Us</h1>
<div>
<p style={{ marginBottom: "1.3rem" }}>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam
qui libero, nulla quo sequi doloribus dicta, ea similique
voluptatum minus voluptates architecto beatae quam eum nam fugiat.
Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus
dicta, ea similique voluptatum minus voluptates architecto beatae
quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit
amet consectetur adipisicing elit. Quisquam qui libero, nulla quo
sequi doloribus dicta, ea similique voluptatum minus voluptates
architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem,
ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui
libero, nulla quo sequi doloribus dicta, ea similique voluptatum
minus voluptates architecto beatae quam eum nam fugiat. Soluta,
saepe ipsa?
</p>
</div>
</div>
<div className="cc-cards">
{members.map((member, index) => (
// <TeamCard
// key={index}
// name={member.name}
// link={member.link}
// imageLink={member.imageLink}
// />
<div key={index} style={cardWrapper}>
<div className="logo-wrapper">
<div className="logo-image">
<img src={member.imageLink} alt="member-avatar" />
</div>
<div className="linkedin-icon-wrapper">
<a href={member.link} target="_blank">
<i class="bi bi-linkedin icon-size"></i>
</a>
</div>
<div className="user-name">{member.name}</div>
<div></div>
</div>
</div>
))}
</div>
</div>
</div>
);
}
Style for About Us
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,100&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
.about-us-div {
width: 900px;
margin: 0 auto;
font-family: "Lato", sans-serif;
color: white;
padding: 1rem;
background-color: #2b2b2b;
}
.content {
display: flex;
align-items: center;
}
.cc-cards {
display: flex;
/* flex-wrap: wrap; */
margin-left: 60px;
margin-top: -20px;
}
.logo-wrapper {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.logo-image {
width: 135px;
height: 135px;
}
.logo-image img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.linkedin-icon-wrapper {
position: relative;
top: -25px;
}
.linkedin-icon-wrapper .icon-size {
color: #ffffff;
font-size: 2rem;
}
.user-name {
font-size: 1.68rem;
font-weight: 600;
}
@media (max-width: 710px) {
.cc-cards {
justify-content: center;
padding-bottom: 30px;
}
}
@media only screen and (max-width: 420px) {
.about-us-div {
width: auto;
}
.content {
flex-direction: column;
}
.cc-cards {
flex-direction: column;
}
.cc-cards div {
margin-top: 1rem;
}
}
Note: Since I do not possess the TeamCard component, I have built a block by taking reference from your screenshot.