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

TYang
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
Ninthony
Shopify Partner
1637 224 613

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
TYang
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
Ninthony
Shopify Partner
1637 224 613

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
weaverc
Tourist
13 0 1

What about moving the text up instead of down?

0 Likes
Max123
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
Ninthony
Shopify Partner
1637 224 613

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
aiona
New Member
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)

0 Likes
mvlc
New Member
1 0 0

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

0 Likes