ow can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue }

Viewed 14

how can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue }also see my code and tell every step to do that i have tired margin button but it didn't work pls tell how to do pls also see the image image here

`import { Header } from "../../features/theme/Header";
import styles from "./Home.module.css";
import { useAppSelector } from "../../app/hooks";
import { Feed } from "../../features";

export function Home(): JSX.Element {
  const { currentUserImage } = useAppSelector((state) => state.currentUser);

  return (
    <div className={styles.home}>
      <Header page="Home" />
      <div className={styles.tweetField}>
        <div className={styles.userAvatar}>
          <img src={currentUserImage} alt="" />
        </div>
           <div>
        <div>
            </div>
        </div>
      </div>
      <Feed />
    </div>
  );
}

my css code

.home{
    border-right: solid 0.2px var(--border-color);
}

.homeHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: solid 0.2px var(--border-color);
    font-size: 1.2rem;
    font-weight: bold;
}

.homeHeader button{
    border: none;
    background: none;
    font-size: 1.3rem;
    color: var(--theme-page-text);
}

.tweetField{
    display: flex;
    margin-top: 1rem;
    border-bottom: solid 0.2px var(--border-color);
}

.userAvatar{
    outline: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-left: 1rem;
    background: #fff;
}

.userAvatar img{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.tweetActions{
    width: 100%;
    margin: 1rem;
}

.tweetActions span{
    font-size: 1.3rem;
    color: var(--light-text-color);
}

.tweetActions div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.tweetActions button:first-child{
    border: none;
    background: none;
    outline: none;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.tweetActions button:last-child{
    border: none;
    outline: none;
    color: #fff;
    background: var(--primary-color);
    opacity: 0.5;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
}

wewaewavresrvesgrefesfvesfvesfrervesrservesrves

0 Answers
Related