Debut theme - how to move the text position on Image with text overlay and the "shop now" button?

TYang
Visitor
2 0 0

Hi there,

Is there a way to move the text on "image with text overlay" section? Right now, everything is centred. I'd like to move all the texts towards bottom. Thanks in advance.

 

Replies 10 (10)

Ninthony
Shopify Partner
2329 350 1023

You can adjust the padding on the element. If you go to theme.scss.liquid and put this in the bottom it'll get your text pretty close to the bottom. Just adjust the percentage as you need:

 

.hero__inner {
    padding: 13% 0 0 0;
}
If my solution helped you, please like it and accept it as the solution!
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 😄
TYang
Visitor
2 0 0

Thank you Ninthony. I moved all the text and button to the bottom, except now the button is stick to the bottom line, no space at all. lol Is there a way to move it up a bit? How about the text on smartphone interface?

Ninthony
Shopify Partner
2329 350 1023

Yeah just change the percentage to a lesser value to move it up a bit. For mobile you can use a media query to set a different percentage at a certain screen size. So since your mobile menu would kick in at 749 pixels, do it like this:

 

@media(max-width: 750px){
.hero__inner {
    padding: 13% 0 0 0;
}
}

and adjust that percentage to whatever you need it to be at mobile. Just trial and error.

If my solution helped you, please like it and accept it as the solution!
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 😄
weaverc
Tourist
15 0 2

What about moving the text up instead of down?

Max123
Visitor
2 0 0

I found theme.liquid, but cant figure out where to put the padding code to move the text lower

 

Ninthony
Shopify Partner
2329 350 1023

Not theme.liquid, go to your Assets folder and open your theme.scss.liquid file. Should be able to paste the code to the bottom of that page.

If my solution helped you, please like it and accept it as the solution!
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 😄
aiona
Visitor
1 0 0

Hi Ninthony,

How can you make the option available to move the text and button to the left or right side? (for example in a slider)

ForageDrinks
Visitor
1 0 0

Hi Aiona, did you get an answer on this? Having the same issue..

mvlc
Visitor
1 0 0

this worked great for the full screen view but didn't seem to adjust the desktop view. any tips for that?

janehaill
New Member
6 0 0

But I cant find theme.scss.liquid in my debut. Any other solution?