Text Overlay

[rshields]

I am trying to add text overlay to my collections feature as shown in the image below. I am using the Dawn theme. I want a transparent text box so you only see the text, overlayed onto the image. For example, in the below ss, I want to overlay "Fitness Equipment" onto the picture below, but it requires additional coding and Im not sure how to do that. Any help would be greatly appreciated. 

[AnneLuo]

Hi, @rshields 

Can you please share the store URL so that I can assist you?

[rshields]

Luckily. I figured it out. I now have a new problem though. My image banner on my home page takes up the entirety of my screen width. How do I shrink the margins to align with everything else? 

store url: My Store

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
@media screen and (min-width: 750px) {
  #Banner-template--19006754783469__image_banner {
     max-width: calc(var(--page-width) - 10rem) !important;
     margin: 0 auto !important;
  }
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[rshields]

Can you please show me in the line of code where exactly its supposed to go? I input it as such but it is not working. 

[AnneLuo]

Hi, @rshields 

Can you provide your collaborator code if possible? I will check it for you.

[rshields]

7292

[AnneLuo]

I have applied the access. Please accept.

[rshields]

I did

[AnneLuo]

Done. You can check on your store.

[rshields]

Thank you!

[AnneLuo]

You are welcome. Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[LizHoang]

Hi, can you share store URL?