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

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!

0 Likes

Hey Kim, 

If this is your desired layout http://take.ms/M3iKN

1. Open sections/hero.liquid (Themes > Edit code)

2. Change 'text-center' to 'text-left' as in this screenshot http://take.ms/ONfCM

3.  Add this css code to the very bottom of theme.scss.liquid

.hero__inner .mega-subtitle{
 margin: 0;
}

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
1 Like
Tourist
46 0 3

Hi Kim,

 

You can add text-align: left and remove margin: 0 auto; on this 

 

#shopify-section-hero .page-width {

  margin: 0; 

  text-align: left;

}

 

Let me know if you have success.  That is 100% solution.

1 Like
New Member
3 0 0

I got it to work! Thanks so much for your help, Maya and Lixon! :)

0 Likes
Shopify Partner
1 0 0

This is great, thanks Maya and Lixon.

How can I make it on the debut theme so I can have multiple "Image with text overlay" sections go from Left Align to Right Align to Left Align?

Thanks!

0 Likes
New Member
2 0 0

Hi Lixon

I followed your instructions but while it has pulled it to the left it has gone funny. Are you able to tell me what I have done wrong?

0 Likes
New Member
2 0 0

Ah all good I have worked it out! For anyone else who gets stuck- theme.scss.liquid  is under Assets

0 Likes
New Member
1 0 0

I followed these directions and the text for the "Heading" is changed, but the text underneath is still centered

0 Likes
Shopify Staff
Shopify Staff
335 31 79

Hi, @SkyLaur!

 

May here from Shopify.

 

Looking through this thread, it looks like the code suggestions were made a few years ago, and it may not work if you have the latest version of Debut installed. If you don't find the codes above working with your newly installed theme, feel free to follow the steps below.

 

1. Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results.

2. Go to 'Online store > Actions > Edit code'.

3. Open up 'theme.scss.liquid' located inside the 'Assets' folder.

4. Scroll down to the bottom of the file and paste the following code:

 

.hero .mega-subtitle, .hero .mega-title {
  margin: 0;
  text-align: left;
}
.hero__btn {
  float: left;
  margin-top: 10px;
}

This code will left align all elements on your slideshow overlay including the heading, subheading and button.

5. Click 'Save'.

 

After you save your changes, your image with text overlay section should look similar to this: 

 

If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made and supported by Shopify, our theme support may be able to look into making the change as well if your account is eligible!

 

Let me know if you have any followup questions.

 

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

0 Likes
New Member
4 0 0

@May 

 

I gave your code a shot.  I copied it into my code per your instructions below, but it only seemed to impact the heading text (that lays over the Hero image).  The text under the heading didn't seem to be impacted. 

 

You can see what is happening at refurbishedflame.com.  The Heading text is right aligned, but the text under it seems to stay centered.

 

Any help you can provide would be greatly appreciated.  Also, I tried to go to the Shopify Experts link you sent but it sent me to a dead page.  Let me know if there's someone else I should reach out to.

 

Thanks!

Steve

0 Likes