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

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
Astronaut
1091 150 274

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 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
0 Likes
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
Astronaut
1091 150 274

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 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
0 Likes
Tourist
12 0 1

What about moving the text up instead of down?

0 Likes