Image with text overlay issues debut theme

Store Design
1

Hello,

Can somebody PLEASE help. I have spent soooo much time trying to perfect my hero banner on my site. My store is www.treasureknot.com password Millie0309.

My problem is the position & size of the text over the image. I received coding that works great for the text position on desktop, not good for mobile. For desktop, I would also like to make the text larger because the text gets lost (the text colour is another issue). Can anybody please help.

aaaaa.JPG
aaaaa.JPG1920×1020 190 KB

aaaaaaaa.JPG
aaaaaaaa.JPG1920×1020 144 KB

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.hero .hero__inner .text-center {
text-align: center !important;
align-items: center;
justify-content: center;
display: block;
height: auto;
}
.hero .hero__inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: auto;
max-width: 500px;
margin: auto;
}
.hero {
position: relative;
}
.hero .mega-subtitle p {
margin-bottom: 20px;
}
3

The other issue of your store is performance. Too slow

I think you should try the Swift app to optimize your store speed performance: https://apps.shopify.com/swift

4

Hi, I checked my device and it work perfectly .

See attachment .

Please check it again.

and if you want to change font color then please add below css in assets/theme.scss.css file

.mega-subtitle p {
color: #fff;

}
You can change any color instead of #fff.