Image with Text Overlay in Turbo

Solved
KatFuentes
New Member
11 0 0

Hello Experts!

How to move the text and CTA button in Image with Text Overlay (hero image)?

I am using Turbo and I would like them to move to the bottom center of the image, in MOBILE view only.

Super thanks in advance!

Accepted Solution (1)

Accepted Solutions
LitCommerce
Trailblazer
254 61 67

This is an accepted solution.

Hi @KatFuentes,

You want to show this: https://i.imgur.com/RSUbOwF.png

Go to Assets > styles.css and paste this at the bottom of the file:

@media only screen and (max-width: 480px){
.shopify-section--image-with-text-overlay .caption{
position: absolute !important;
transform: none !important;
top: 0 !important;
margin: 15px auto!important;
}
.shopify-section--image-with-text-overlay .headline{
font-size: 20px !important;
margin-bottom: 5px !important;
color: #fff !important;
}
.shopify-section--image-with-text-overlay .subtitle{
font-size: 12px !important;
color: #fff !important;
}
.shopify-section--image-with-text-overlay .subtitle p{
margin: 0 0 5px !important;
}
.shopify-section--image-with-text-overlay .action_button{
font-size: 12px !important;
min-height: auto !important;
width: auto !important;
}
}

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 8 (8)
Zworthkey
Shopify Partner
2535 301 634

Hii, @KatFuentes 
Kindly share your store URL so,
I can solve it.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Natztech
Shopify Partner
2230 564 1363

hello @KatFuentes 

Please provide the website URL and if your store is password protected then also provide a password and provide a solution here and please provide the highlight of  screenshot  So I will check 

KatFuentes
New Member
11 0 0
Here's the URL -- https://www.nninspirationalgifts.com/

I just wanted to move the text and CTA of the hero image (image with text
overlay) at the center bottom of the image, for MOBILE view only

Thanks!
Zworthkey
Shopify Partner
2535 301 634

@KatFuentes 
can you give me a screenshot so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
KatFuentes
New Member
11 0 0

HereNatalia-Nicholson-Customize-Copy-of-NN-Gifts-9C-27-APR-2021-Shopify.png

LitCommerce
Trailblazer
254 61 67

This is an accepted solution.

Hi @KatFuentes,

You want to show this: https://i.imgur.com/RSUbOwF.png

Go to Assets > styles.css and paste this at the bottom of the file:

@media only screen and (max-width: 480px){
.shopify-section--image-with-text-overlay .caption{
position: absolute !important;
transform: none !important;
top: 0 !important;
margin: 15px auto!important;
}
.shopify-section--image-with-text-overlay .headline{
font-size: 20px !important;
margin-bottom: 5px !important;
color: #fff !important;
}
.shopify-section--image-with-text-overlay .subtitle{
font-size: 12px !important;
color: #fff !important;
}
.shopify-section--image-with-text-overlay .subtitle p{
margin: 0 0 5px !important;
}
.shopify-section--image-with-text-overlay .action_button{
font-size: 12px !important;
min-height: auto !important;
width: auto !important;
}
}

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

KatFuentes
New Member
11 0 0

Thanks @LitCommerce!

It didn't change anything even after changing the margin numbers.  

Here is the revised mobile view. 

We wanted to move down the text to the bottom part so it can be seen clearly.

Hope you could help.

move text.JPG

Thanks in advance!

KatFuentes
New Member
11 0 0

Oh, it worked already! Only applied the first bracket.

Thanks @LitCommerce!