Text above image - Expanse Theme

[YB1981]

Within the Expanse Theme > In the element "Text colums with images" the title is displayed underneed the image standard. Is there a way to position the title above the image? With custom CSS directly in the ellement (prefered), or in the theme code?

[ZestardTech · Accepted solution]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > main.css and paste this at the bottom of the file:

@media (min-width:767px){
.h3.rte--block {
position: absolute;
top: -47px;
}
.index-section.color-scheme-1 .page-width {
position: relative;
}
}

[Huptech-Web]

Hey @YB1981 
Could you please share the store so I can check and provide you with a more tailored solution.

[YB1981]

Hi, Thanks. Pls check the preview: https://1t01tdy5fr9ipz9m-80249094488.shopifypreview.com

[TerenceKEANE]

Hi!

What you've described can be done. Could you send the website link?

Terence

[ZestardTech]

Hello There,

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

[YB1981]

Hello, thanks for your reply. Sorry but i can't give you access since i'm not the owner.

[ZestardTech · Accepted solution]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > main.css and paste this at the bottom of the file:

@media (min-width:767px){
.h3.rte--block {
position: absolute;
top: -47px;
}
.index-section.color-scheme-1 .page-width {
position: relative;
}
}

[Anshul_arora · Accepted solution]

Hello @YB1981 ,

I understand you are looking to change the positioning of the Featured Collection name above the images.

Please try this CSS Code for changing the text element above the image.

Add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

h2.h3.rte--block {
position: absolute !important;
top: 15px !important;
}

</style>

Output -: https://prnt.sc/_KoCwW2rBCdN

I hope the code helps you.

Please share if you have any queries.

Thank you.

[YB1981]

thanks it works in css on the element as well.

Now to center the text adding "text-align: center;" does not to the trick.

How can do that?
And changing the font weight? Or bold?

Thanks!

[YB1981]

Hi again,

So this script won't align the text to the center:

h2.h3.rte--block {
position: absolute !important;
top: 15px !important;
text-align: center;
}

Can you help again pls?