0

I am using ReactJS. This is the Page component part

<div className="animated main">
   <div className="title text">Lorem ipsum dolor sit amet consectetur </div>
   <div className="image"></div>
</div>

And this is the page.css component

*{
    box-sizing: border-box;
}

.main{
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
}

.title{
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: left;
    font-size: 4em;
    font-weight: bold;
    padding: 5%;
}

.image{
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    background-image: url(../images/image1.png);
    background-repeat: no-repeat;
    border: 1px solid black;
    position: absolute ;
    
}


* {
  box-sizing: border-box;
}

.main {
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
}

.title {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: left;
  font-size: 4em;
  font-weight: bold;
  padding: 5%;
}

.image {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background-image: url(../images/image1.png);
  background-repeat: no-repeat;
  border: 1px solid black;
  position: absolute;
}
<div class="animated main">
  <div class="title text">Lorem ipsum dolor sit amet consectetur </div>
  <div class="image"></div>
</div>

I am trying to position the image of the right side of the screen but it disappears whenever i add the position : relative / absolute feature.

Jafin
  • 4,153
  • 1
  • 40
  • 52
Arnab Das
  • 31
  • 7
  • 2
    What are you trying to achieve by adding those positions? I would imagine adding them just causes the image to be positioned behind another element, but there's not much we can do to help without seeing the issue ourselves. – DBS May 30 '22 at 13:17
  • With flexboxes you can use `justify-content` and `align-items` together with `margin`s to achieve this effect: [link](https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties) – Slavi May 30 '22 at 14:34

0 Answers0