How can I adjust the text overlay on a hero banner in the debut theme?

Store Design
1

Hello,

Im wondering how to adjust and move the text overlay on my hero banner in the debut theme? The codes in previous discussions don’t seem to work which are these:

@media only screen and (min-width: 750px) {
.slideshow__text-content.slideshow__text-content–vertical-top {
top: inherit;
bottom: 0;
}
}

.hero__inner {
    padding: 13% 0 0 0;
}

Thanks!

2

Hello, @Southpaw12 .

Thank you for reaching out and posting this question.

I understand that you’re looking to move the text overlay on the hero banner of your Debut theme. Since you’re using a Shopify-supported theme, then this might be something that our Theme Support team can help you with. If your store is subscribed to a plan, then you’re eligible to use the complimentary design time included with your subscription for customizing your theme. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

I’d love to know when our Theme Support can help you with this. Keep me posted!

1 Like
3

Hi @Southpaw12 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

Hello!

www.cumfylids.com

PW: Tito123!

5

Hi @Southpaw12 ,

Which location do you want to move to? Can you let me know?

Thanks you

6

I Would like to lower it. Can I choose the % within the code afterwards on how low I want it?

7

Hi @Southpaw12 ,

You can reduce this spacing in theme.css file:

.hero__btn {
    margin-top: 100px !important;
}

NOTE: Value: 100px → you can change to match your theme.

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
8

hm, that didnt seem to work when putting it at the bottom of the theme.css file however it did change the size of the banner when putting it at the top but the overlay text remained at the same place.

9

Hi @Southpaw12 ,

You can try below code:

@media (max-width: 767px) {
.hero__inner {
    padding: 30% 0 20px !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

10

hm, weird it didnt work but I appreciate the help!