Help Getting Image Side by Side with Text

Solved
Highlighted
Tourist
13 0 0

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:

Screen Shot 2020-03-11 at 9.54.06 AM.png

 

I want it to look like this:

 

model mock up.jpg

 

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>

0 Likes
Highlighted
Shopify Partner
1198 162 323
<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.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Shopify Partner
206 38 47

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>

 

1 Like
Highlighted
Tourist
13 0 0

Thank you! It is so close, but how do I get the first line Model Name: Maria to line up with the top of the photo now? Screen Shot 2020-03-11 at 10.53.09 AM.png

0 Likes
Highlighted
Tourist
13 0 0

Thank you. Only problem is the photo not lining up with the text. any ideas? (see new photo below)

0 Likes
Highlighted
Shopify Partner
1198 162 323

Can you share a url so we can take a closer look? 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
13 0 0

@Ninthony wrote:

Can you share a url so we can take a closer look? 


https://cocoandlily.com/products/test

0 Likes
Highlighted
Shopify Partner
206 38 47

Share store password @hp2020 

0 Likes
Highlighted
Tourist
13 0 0

@Wahab_Ahmad wrote:

Share store password @hp2020 


No password, I removed it temporarily. 

0 Likes
Highlighted

Success.

Shopify Partner
1198 162 323

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>
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes