Solved

Text above image - Expanse Theme

YB1981
Tourist
15 0 2

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?

 

Screenshot 2024-05-23 112907.png

Accepted Solutions (2)
ZestardTech
Shopify Expert
5604 1019 1347

This is an 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;
}
}

 

ZestardTech_0-1716458968893.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Anshul_arora
Navigator
417 119 83

This is an 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

Anshul_arora_0-1716463156359.png


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 9 (9)

Rishihuptech
Shopify Partner
601 106 121

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
YB1981
Tourist
15 0 2

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

TerenceKEANE
Shopify Partner
511 86 78

Hi!

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

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

ZestardTech
Shopify Expert
5604 1019 1347

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
YB1981
Tourist
15 0 2

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

ZestardTech
Shopify Expert
5604 1019 1347

This is an 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;
}
}

 

ZestardTech_0-1716458968893.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Anshul_arora
Navigator
417 119 83

This is an 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

Anshul_arora_0-1716463156359.png


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
YB1981
Tourist
15 0 2

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
Tourist
15 0 2

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?