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

Highlighted
New Member
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.

 

0 Likes
Shopify Partner
1371 185 441

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 and accept as 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 :D
5 Likes
Highlighted
New Member
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?

0 Likes
Highlighted
Shopify Partner
1371 185 441

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 and accept as 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 :D
1 Like
Highlighted
Tourist
12 0 1

What about moving the text up instead of down?

0 Likes
Highlighted
New Member
2 0 0

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

 

0 Likes
Highlighted
Shopify Partner
1371 185 441

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 and accept as 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 :D
1 Like