Align text to column in liquid

Solved
Excursionist
32 0 1

Hello,

 

I have an alternative collection template with 3 columns: column 1, column 2, and column 3. I want to align columns 1 and 3 around column 2. Keeping in mind I want column 2 aligned right to the center, and column 1 and 3 aligned right and left relative to column 2 like this:

 

Column 1 Column 2 Column 3

 

Trouble is, my code below creates this:

 

(left-aligned)"Column 1" (center-aligned) "Column 2" (right-aligned) "Column 3"

 

<div class="page-width"><div style="text-align: center;">
<div class="grid">
  <div class="grid__item one-third">First column</div>
  <div class="grid__item one-third">Second Column</div>
  <div class="grid__item one-third">third column</div>
</div>
</div>
</div>

Is it possible to do this with HTML only? Can you share your simplest solution for a newbie? Thank you for any advice you have. 

0 Likes
Excursionist
32 0 1

or I would be interested if anyone knows how to do this by aligning 3 elements (text) around a central text element...like this but so that "Element2" is always centered not matter how Element1 & 3 change.

 

<div class="page-width"><div style="text-align: center;">

<span style="float: center; width: 34%; text-align: right;">Element1</span> 
<span style="float: center; width: 33%; text-align: center;">Element2</span> 
<span style="float: center; width: 33%; text-align: left;">Element3</span></div>

 

0 Likes
Shopify Partner
565 122 184

@tesstesting 

 

Try the following code:

<div class="page-width">
<div style="width: 100%;float: left;">
      <span style="float: left;width: 33%;text-align: left;">Element1</span> 
      <span style="width: 33%;text-align: center;float: left;">Element2</span> 
       <span style="float: right;width: 33%;text-align: right;">Element3</span>
</div>
</div>

I hope it will help you.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Excursionist
32 0 1

@Tejas_Nadpara  thanks for helping me.

 

This is how the code you shared looks:

Screen Shot 2020-01-11 at 7.33.16 PM.png

 

I need Element1 to move beside Element 2 (right-aligned), and Element 3 to move beside element2 (left-aligned)...like this:

 

                                                                                               Element 1 Element 2 Element 3

 

Soo..Element 2 is always centered...so that Element 1 and 3 wrap around Element 2...does this make sense?

0 Likes

Success.

Shopify Partner
565 122 184

@tesstesting 

 

Try this code:

<div class="page-width">
<div style="width: 100%;float: left;">
      <span style="float: left;width: 40%;text-align: right;">Element1</span> 
      <span style="width: 20%;text-align: center;float: left;">Element2</span> 
       <span style="float: right;width: 40%;text-align: left;">Element3</span>
</div>
</div>

Let me know if you want to move Element1 and Element3 more closer to Element2

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Excursionist
32 0 1

Thanks @Tejas_Nadpara !!

 

Thank you. I did adjust the ratio to 49:2:49!

1 Like
Excursionist
32 0 1

@Tejas_Nadpara 

 

Can you help me figure out how to adjust this for mobile? I used your code and adjusted it to this:

 

<div class="page-width">
<div style="width: 100%;float: left;">
      <span style="float: left;width: 49%;text-align: right;">Element1</span> 
      <span style="width: 2%;text-align: center;float: left;">Element2</span> 
       <span style="float: right;width: 49%;text-align: left;">Element3</span>
</div>
</div>

On my desktop it looks like this: Element 1 Element 2 Element 3,

but on mobile it looks like this: Element 1Element2Element3...

Can this be adjusted on mobile only to a 48:4:48 ratio?

 

Thanks!

0 Likes