Align Text in Template

Solved
New Member
6 0 0

I have a number of collection templates I'm adding text to like this: 

<span style="font-size: 12pt;">Hello Example</span>

I want this text to appear exactly as it would as if it was in the body of the collection page...without adding it to each collection page. So, text should be aligned left but also aligned with the products in the collection list. Currently, this text is completely left aligned without any margins so it starts at the left corner of the screen.

 

How do I increase or decrease the margin of the code so that it is aligned with the product list?

 

 

0 Likes

share your store url for better understanding so i can help you.

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
New Member
6 0 0

Im playing around with a trial account so it isn't public but I posted a pic of my problem at the bottom.

As you can see my text is too far to the left, and I would like it to be aligned with the products (the same way body text aligned-left is aligned with products in collection pages)

The code for the text in the image is:

<span style="font-size: 12pt;">This text is aligned too far to the left.</span>

{% comment %}
  The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section 'collection-template' %}

 

Screen Shot 2019-11-27 at 12.31.29 PM.png

0 Likes

<span style="font-size: 12pt;text-align: center;"></span>

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Astronaut
1091 150 274

Hey @testerchester if you preview your theme at Online Store > Themes > Actions > Preview -- A little bar will come up at the bottom to share your preview. That link will expire in an hour but we can view your store until then. Or could you say what theme you're using? The collection is probably inside of a container, but we don't know the class name. If you give your span element the same class name it should put your text where you want it to go.

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
New Member
6 0 0

@Ninthony 

 

I'm using Debut

Here is my preview link, but the collection I am testing is /collections/test

https://testerchestertwo.myshopify.com/?_ab=0&_fd=0&_sc=1&key=5041e16270118c04d7b73a2c0caf7f9e378bbe...

0 Likes
New Member
6 0 0

@ashiqueh4

 

Unfortunately this did not change anything but thank you for the suggestion

0 Likes

Success.

Astronaut
1091 150 274

@testerchester change your element to a div and give it the class name of page-width:

 

<div class="page-width" style="font-size: 12pt;">This text is aligned too far to the left.</div>

Should be good to go, use the above without text-align: center.

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
New Member
6 0 0

Thanks Ninthony that worked perfectly.

0 Likes