How can I adjust text position on a hero banner in debut theme?

Store Design
1

Hello,

Depending on the image I use for my hero banner in debut theme, I need to be able to move the text position. For example, the image I used over the Christmas period, the text was positioned top centre of the image. I now want to move the text to the centre of my new image. I have tried to changing the previous coding I was given, but nothing changes. Can somebody please assist. My store is currently paused. www.treasureknot.com

2 Likes
2

Hello There,

Please share your store password.
So that I will check and let you know the exact solution here.

3

Millie030913

4

Sorry, Your password is not working.

Thank you.

5

Sorry, try Millie0309

6

Hi,

Which text you want to be changed ?

Please provide screenshot.

Thank you.

7

banner text.JPG
banner text.JPG1920×1020 172 KB

The text & button on the hero banner please. I would like to be able to move this text easily for different images.

8

@Mareka

Please share your store password.
So that I will check and let you know the exact solution here.

Thanks!

9

Hi,

There is no text and button found on hero banner.

Thank you.

10

Millie0309

11

Sorry, please see this preview https://2s9lzatlf2ddx0gp-34503295108.shopifypreview.com

1 Like
12

@Mareka

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

#shopify-section-1629938477f33176ac .hero__inner .text-center {
    text-align: center !important;
}

Thanks!

13

Please add this below code in bottom of assets/theme.scss.css file

.hero__inner .page-width.text-center {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

width: 100%;

}
.text-center .mega-subtitle {
width: 100%;
}

.hero__inner .text-center {
text-align: center !important;

}
Thank you.

14

Thanks for that but it is now centre top, I need it just centre please.

15

@Denishamakwana

the text & button don’t appear to be perfectly centred on the image, can you assist

16

Hi @Mareka ,

  1. Go to theme editor

  2. Edit Asset/theme.css

  3. Add the following CSS to the bottom of theme.css

.hero__inner .page-width.text-center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -230px;
    width: 460px !important;
    height: 300px;
}
  1. On my side, it works well

Snipaste_2022-01-20_14-28-09.png
Snipaste_2022-01-20_14-28-09.png1237×1006 209 KB

If it works for you, please accept my answer and like it.

Thank you in advance.

17

@GavinChan

Thanks so much, it works. So if I change image & want to move the text to the right top of the image, I just need to adjust the percentage & pixel margins within that coding ?

18

you can try this one.

.hero__inner .page-width.text-center {

height:100%;

}

Thank you.

19

@GavinChan

Worked great for desktop but not so much for mobile. The ends of the text get chopped off.

mobile.JPG
mobile.JPG1920×1020 167 KB

Also, can I make the text font only larger on desktop only ?

20

Hi,

Please try this below code again it’s really helpful for you.

.hero__inner .page-width.text-center .hero__btn {
margin-top: 0!important;

}

.hero__inner .text-center {
text-align: center!important;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;

}

.text-center .mega-subtitle {
width: 100%;

}
Thank you.