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

[May]

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!

[SST]

@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]

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!

[Alon23]

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

[Alon23]

@May

[May]

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!

[Lisa1995]

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]

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

[IttantaTech]

@Kim_Bonner 

Thanks for post

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

[Shaunmihikids]

Hi @IttantaTech 

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

Cheers

Shaun