I would like my image to be on the left, and the text to go in line, directly next to (on the right of) the photo. Help!
Currently looks like this:
I want it to look like this:
Here is my code for the page as it is currently configured:
<p class="p1">Model: Maria</p>
<p class="p1">Height: 5’4”</p>
<p class="p1">Normal Size Worn: XS/S</p>
<p class="p1">Weight: </p>
<p class="p1">Hips:</p>
<p class="p1">Bust:</p>
<div style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /> </div>
Solved! Go to the solution
<style> .flex-container{ display:flex; } .text-side { padding: 0 20px; } </style> <div class="flex-container"> <div class="image-side"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /> </div> <div class="text-side"> <p class="p1">Model: Maria</p> <p class="p1">Height: 5’4”</p> <p class="p1">Normal Size Worn: XS/S</p> <p class="p1">Weight: </p> <p class="p1">Hips:</p> <p class="p1">Bust:</p> </div> </div>
Try that out.
Hye @hp2020,
Place this code
<div style="display:inline-block"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /></div>
<div style="display:inline-block;padding:20px;">
<p class="p1">Model: Maria</p>
<p class="p1">Height: 5’4”</p>
<p class="p1">Normal Size Worn: XS/S</p>
<p class="p1">Weight: </p>
<p class="p1">Hips:</p>
<p class="p1">Bust:</p>
</div>
This is an accepted solution.
Use my same code but with another addition, just replace what you used previously with this:
<style> .flex-container{ display:flex; } .flex-container img { margin: 0; } .text-side { padding: 0 20px; } </style> <div class="flex-container"> <div class="image-side"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /> </div> <div class="text-side"> <p class="p1">Model: Maria</p> <p class="p1">Height: 5’4”</p> <p class="p1">Normal Size Worn: XS/S</p> <p class="p1">Weight: </p> <p class="p1">Hips:</p> <p class="p1">Bust:</p> </div> </div>
User | Count |
---|---|
451 | |
211 | |
105 | |
90 | |
87 |