Change text and button position (image with text overlay)

Hello,

I was hoping someone could help me with a few adjustments to an image with text overlay section that is at the bottom of my homepage. At the moment the text and button are in the middle of the image with text overlay section. I would like the button moved to the bottom of the section and the text centre aligned and moved to the top of the section.

I have attached images to show you how I want the new image with text overlay section.

url : https://kitzz3f1erohb1tc-54993551588.shopifypreview.com

Thank you :slightly_smiling_face:

1 Like

@Timstar

thanks for the post can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media (max-width: 750px) {
#shopify-section-1653018214bb21bc08 .hero-text-left {text-align: center !important;}
#shopify-section-1653018214bb21bc08 a.btn.hero__btn {left: 0;position: absolute;display: inline-block;top: inherit;bottom: 30px;left: 0;right: 0;max-width: 230px;margin: 0px auto;}
#shopify-section-1653018214bb21bc08 .hero__inner {vertical-align: top;}
}
1 Like

Wow, looks so much better. Thank you.

1 Like

@Timstar

its my pleasure to help us