How can I arrange an image and text in a flex row?-CodePudding

I'm trying to shrink both the image and the column with the text at the right. At the same time. At this point, only the text is shrinking, until the screen is to small for both columns.

It's my first time using flex for a whole site, so I'm missing some concepts y guess.

The idea is to make the image and the text to have the same width all the time.

This is a version only for desktop and tablet screens. Th movil version will delivery another content.

.twoColumns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  width: 600px;
  max-width: 100%;
  margin-left: 28px;
}

<div >
  <img src="https://dummyimage.com/600x400/000/fff"  width="600">
  <div  >
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

CodePudding user response：

Remove all fixed widths and nest the image in a div.

.twoColumns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  max-width: 100%;
  margin-left: 28px;
}

<div >
  <div >
    <img src="https://dummyimage.com/600x400/000/fff" >
  </div>
  <div  >
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

CodePudding user response：

Your two max-widths were interfering with the flex algorithm. Use the built in flex shorthand on the flex children telling them to grow at a rate of 1, shrink at a rate of 1, and start with 50% of the parent's space respectively.

I added a max-width of 50% on the children as well to shrink the image on very small widths.

You might prefer to use the modern gap property for gaps with flex/grid over using a margin-left.

The resize, overflow and background color are just for this demo.

EDIT: You may also want to add a word-break for very small widths where your words are too long to fit.

.twoColumns {
  display: flex;
  gap: 28px;
  flex-direction: row;
  justify-content: space-between;
  resize: both;
  overflow: auto;
  background-color: #eee;
}

.responsive,
.right {
  max-width: 50%;
  flex: 1 1 50%;
  word-break: break-word;
}

<div >
  <img src="https://source.unsplash.com/random/200x200" >
  <div  >
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

You could also use CSS Grid:

.twoColumns {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  resize: both;
  overflow: auto;
  background-color: #eee;
}

.responsive {
  width: 100%;
  word-break: break-word;
}

.right {
  background-color: skyblue;
}

<div >
  <img src="https://source.unsplash.com/random/200x200" >
  <div >
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

CodePudding user response：

I think you might need something like this:

.left {
  flex: 50%;
}

.right {
  flex: 50%;
  width: 600px;
  max-width: 100%;
  margin-left: 28px;
}

<div >
  <div >
    <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNoYW5nZXxlbnwwfHwwfHw=&w=1000&q=80"  width="600">
  </div>
  <div  >
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
  </div>
</div>

CodePudding user response：

.section1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  width: 100%;
  margin-left: 20px;
  display: flex;
  align-items: center;
}

<div >
      <div >
        <img src="https://dummyimage.com/600x400/000/fff"              >
      </div>
      <div  >
 an open platform for founders to connect, launch ideas/products, find recommended
      </div>
    </div>