How to left-align text on the "image with text overlay" in Debut?

Kim_Bonner
New Member
3 0 0

I'm currently using Debut (https://shop.makelovelythings.com) and I'd like to make the overlay text left-aligned instead of centered so it doesn't run over the products in my image. I'm new to Shopify, so I'm having trouble finding that option. Is it something I need to change in the code, and if so where do I find it?

Thanks!

Replies 26 (26)
May
Shopify Staff
334 33 154

Hi, @SST!

 

Thank you for dropping by and leaving a comment here. 

 

For right-aligning the overlay elements, you'll want to replace margin: 0; on the second line with margin-right: 0px;. So, you'll want to paste the following code on the bottom of your 'theme.scss.liquid' file.

 

.hero .mega-subtitle, .hero .mega-title {
  margin-right: 0px;
  text-align: right;
}

.hero__btn {
  float: right;
  margin-top: 10px;
}

 

 

Let me know if this helps! 

 

Regarding the Shopify Experts link, sorry that it took you to a dead page. I have fixed the link in my original post, you can also visit this link to visit our Shopify Experts page. Alternatively, since Debut is a theme made and supported by Shopify, our theme specialists may be able to help out if your account is eligible. If you would like to explore this route, you can reach out to our 24/7 support team here.

 

If you have any followup questions, please feel free to reply to this thread!

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

SST
New Member
4 0 0

@May

 

This worked perfectly to align the text in the hero image to the right.

 

I'm now experimenting with placing the text centered, but vertically aligned to the top of the image.  Is there any code I can input to change the vertical alignment so the text floats up to the top of the hero image?

 

Thanks!

Steve

May
Shopify Staff
334 33 154

Hi, @SST!

 

Aligning texts or items vertically is definitely possible. Check out this third party resource that discusses everything about vertical-align CSS properties. In this case, you'll want to edit your 'theme.scss.liquid' file and add the following code to the bottom of the file:

 

  .hero__inner {
    vertical-align: top;
  }

Alternatively, you can edit your 'hero.liquid' file and add the code below on the very top of the file.

<style>
  .hero__inner {
    vertical-align: top;
  }
</style>

You can choose to add the code on either file (you don't need to do both).

 

Let me know if this helps.

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Alon23
Tourist
16 0 2

Hi May,
Thanks, this helps a lot!

I have a question:
We have been using many different "hero"s (Image with text overlay) on our site - we have two in the homepage and a few others in different pages as well (we changed the code and are using the sections feature in almost all of our pages by duplicating these section, changing their names).

How do we make this "left text alignment change" to one hero only and not the all the hero sections in our site?

 

Tnx

May
Shopify Staff
334 33 154

Hi, @Alon23!

 

It's quite difficult to tell which code to insert or change without looking directly into your customized codes. From your explanation, it looks like you can use inline CSS instead to modify individual hero sections without affecting the entire hero image on your website. 

 

To start, you'll want to find the HTML code of the hero section, then you can inject an inline CSS for example, the following is the code of your text:

 

<h2 class="h1 mega-title mega-title--large">Image with text overlay</h2>

you can add style="text-align: left;" inside the <h2> tag, so your code will look like this:

 

<h2 class="h1 mega-title mega-title--large" style="text-align: left;">Image with text overlay</h2>

If you have further questions about this, feel free to start a new thread or reach out to one of our Shopify Experts.

 

Cheers!

 

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Lisa1995
New Member
1 0 0

Hello May,

 

I tried to input the code, but it only had impact on my button label?

My titles are still centered. Can you maybe help me out?

 

Thanks!

 

Lisa 

Shaunmihikids
Excursionist
14 0 3

Hi @May 

Thanks for your help here! Related question - how do you make the heading text go over two lines (i.e. add a line break)?

The title of my heading is "sunglasses for mini hipsters", but i'd like to be say:

sunglasses for
mini hipsters

Thanks in advance!

Shaun

 

mihi.PNG

IttantaTech
Shopify Partner
509 55 92

@Kim_Bonner 

Thanks for post

i can see left align text top banner do you have any other section so let me know.

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
Shaunmihikids
Excursionist
14 0 3

Hi @IttantaTech 

Would you please be able to provide any direction re my query above?

Cheers

Shaun