By inline-block your objects will be side-by-side and giving both objects width of 100% so they will take their respective parent’s width. Finally, in the case of text, I gave overflow-wrap: break-word so the text will not collapse with the image
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
padding: 100px;
}
.row .co150 {
position: relative;
display: inline-block;
vertical-align: top;
width: 48%;
}
.co150 p {
width: 100%;
overflow-wrap: break-word;
}
.imgBx {
width: 100%;
}
.imgBx img {
width: 100%;
object-fit: contain;
}
<section class="about" id="about">
<div class="row">
<div class="co150">
<h2 class="titleText"><span>A</span>bout Us</h2>
<p>udgugqguugdugwugugugduqugdgqwuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.
<br><br>lorem ipsum dolores umbridge x her husband blalalalallllllllllllllllllllllll .
</p>
</div>
<div class="co150">
<div class="imgBx">
<img src="https://i.picsum.photos/id/425/536/354.jpg?hmac=wBNHXWWIrsjZJiC-motCXU36RWkqnUAAPfVJulwHGHM">
</div>
</div>
</div>
</section>
Working FIDDLE
Hello I am new to coding. My image is overlapping with the text in the about us section.
in the tutorial I’m watching the text is next to the image. It does not overlap with it. Any help?
* {
font-family: "Poppins ", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
padding: 100px;
}
.row {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
}
.row .co150 {
position: relative;
width: 48%;
}
<section class="about " id="about ">
<div class="row ">
<div class="co150 ">
<h2 class="titleText "><span>A</span>bout Us</h2>
<p>udgugqguugdugwugugugduqugdg qwuuuuuuuuuuu uuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmm
jjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjj hhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhh.
<br><br>lorem ipsum dolores umbridge x her husband blalalalallllllllllllllllllllllll .
</p>
</div>
<div class="co150 ">
<div class="imgBx ">
<img src="img1.jpg ">
</div>
</div>
</div>
</section>
How do I fix this problem?
we know nothing about the tutorial you are following and what result is expected here. what we can see is that you do not (re)set any rules to ![]()
and that your impossible text doesn’t wrap. … use fake text like lorem ipsum for possible text
Seems like you are using bootstrap. Try to divide row in to two columns.
@BonieZat he claerly declaring CSS. besides the 2 column work as intended. Its just his impossible text without any breakpoints/wrap that causes the overflow.
