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!
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!
Hii, @KatFuentes
Kindly share your store URL so,
I can solve it.
Thank You.
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
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!
@KatFuentes
can you give me a screenshot so,
I can solve it perfectly.
Thank You.
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.
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.
Thanks in advance!
Oh, it worked already! Only applied the first bracket.
Thanks @LitCommerce !