im trying to create a small bit of text with an image to the right of it. However, the site im working on doesnt have the option to create a stylesheet so i have to write my css inside of my html file. The code below shows what im working on (the image is just a random one):
<div style="display:flex; max-width:980px; margin:auto; align-items:center; justify-content:center;">
<div style="padding: 10px;">
<h1 style="font-weight: bold; font-size: 2em; padding-bottom: 25px;">Title</h1>
<p style="width: 30vw;">paragraph of text.
another paragraph of text</p>
</div>
<img style="padding: 10px; width:100px;" src="https://images.squarespace-cdn.com/content/v1/5e10bdc20efb8f0d169f85f9/09943d85-b8c7-4d64-af31-1a27d1b76698/arrow.png" />
</div>Is there a way to make it so that when the text and the image dont fit next to eachother anymore, the image gets put underneath the text?
2
flex-wrap: wrap;
<style>
.d1 {
display:flex;
max-width:980px;
margin:auto;
align-items:center;
justify-content:center;
flex-wrap: wrap; /* NEW */
}
.d1 > :first-child {
padding: 10px
}
.d1 h1 {
font-weight: bold;
font-size: 2em;
padding-bottom: 25px;
}
.d1 p {
width: 30vw;
}
.d1 img {
padding: 10px;
width: 100px;
}
</style>
<div class="d1">
<div>
<h1>Title</h1>
<p>paragraph of text.</p>
<p>another paragraph of text.</p>
</div>
<img src="https://images.squarespace-cdn.com/content/v1/5e10bdc20efb8f0d169f85f9/09943d85-b8c7-4d64-af31-1a27d1b76698/arrow.png" />
</div>