Image and text on right using react and css-CodePudding

I am trying to have an image on the left side and the heading and text on the right side. Currently, the image fits perfectly on the viewing screen in the about section when I scroll to it (vertical height of 91 and 45% of the width).

However, I wanted to write a heading and text on the right side of it, and whenever I try to add flex to the parent container my image shrinks and looks very odd. I am not sure how to rectify it so that the image takes 40% of the space in the viewing screen and the text and heading comes properly on the right.

    return (
        <div id="about" className="style-about">
          <div className="style-picture">
            <img src={aboutImage} alt="about image"></img>
          </div>
          <h1> About us </h1>
          <p> Some text here... </p>
        </div>
    )
}

export default About

.style-about {
    background-color:#b2c5b2;
    min-height:91vh;
    /* trying to use display:flex here */
    z-index: -1;
}

.style-picture img {
    max-width: 45%;
    height:91vh;
    object-fit: cover;
}

.style-about {
  background-color: #b2c5b2;
  min-height: 91vh;
  /* trying to use display:flex here */
  z-index: -1;
}

.style-picture img {
  max-width: 45%;
  height: 91vh;
  object-fit: cover;
}

<div id="about" >
  <div >
    <img src="https://via.placeholder.com/300x200" alt="about image" />
  </div>
  <h1> About us </h1>
  <p> Some text here... </p>
</div>

CodePudding user response：

This is a fairly basic flex layout, but you probably only want two columns. This means the heading and paragraph need to be contained.

I'm using flex-basis to set the first column's width. This makes it that wide on smaller screens. On larger screens (see the full page demo) the column shrinks to fit the image. Adjust to suit.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.style-about {
  background-color: #b2c5b2;
  min-height: 91vh;
  display: flex;
}

.style-picture {
  flex-basis: 45%;
}

.style-picture img {
  object-fit: cover;
  max-width: 100%;
}

<div id="about" >
  <div >
    <img src="https://via.placeholder.com/300x800" alt="about image" />
  </div>

  <div>
    <h1> About us </h1>
    <p> Some text here... </p>
  </div>
</div>

CodePudding user response：

the container element with display: flex only affects direct children elements (in your case the div.style-picture, the h1and the p)

    .style-about {
      background-color: #b2c5b2;
      min-height: 91vh;
      z-index: -1;

      display: flex;
    }

    .style-picture {
      flex-basis: 45%;
    }

    .nav-header-text {
      flex-grow: 1;
    }

    .nav-right {
       flex-grow: 0;
    }

you can use flex-basis to have a fixed width of a flex child, then flex-grow: 1 on the middle element to take as much space as possible on the flex container and flex-grow: 0 on the right side element to make it not expandable and it will naturaly get placed on the right end of the flex container

    <div id="about" className="style-about">
      <div className="style-picture">
        <img src={ico} alt="about" />
      </div>
      <h1 className="nav-header-text"> About us </h1>
      <p className="nav-right"> Some text here... </p>
    </div>

Hope it helps!