Text overlay is below slideshow images on mobile display. Help needed please (ATLANTIC THEME)

Solved
luxurytrendz
Excursionist
17 0 7

Hello everyone, does anyone have a code to fix this problem? On desktop my slideshow looks perfect, the text and call to action button is displayed over the slideshow image, (view image below) and id like to be the same on mobile...

DESKTOP VIEWDESKTOP VIEW

However, it doesnt show like this on mobile, (again view imagine below) Does anyone have a code which can change it so that the text and call to action button sits over the slidehow image on mobile? Any help would be greatly appriciated. i would also be looking for someone to do additional work to my website, cheers.

mobile lt.png

dmwwebartisan
Shopify Partner
7303 1723 2301

@luxurytrendz 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
luxurytrendz
Excursionist
17 0 7

luxurytrendz.co.uk pass is    LT1-    thank you for replying

dmwwebartisan
Shopify Partner
7303 1723 2301

@luxurytrendz 

Please add the following code at the bottom of your assets/theme.css file.

@media (max-width: 719px){
.template-index .slide .content-outer-wrap {  position: absolute !important; }
.template-index .slide .content .title, .template-index .slide .content .tagline { color: #fff !important; }
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
luxurytrendz
Excursionist
17 0 7

Legend bro! works brilliant and hasnt affected how it looks on desktop, to change the position of it to lower the text higher or lower would i change this max width number? @media (max-width: 719px){ 

luxurytrendz_0-1616842634925.png

 

dmwwebartisan
Shopify Partner
7303 1723 2301

This is an accepted solution.

@luxurytrendz 

On the above code add "top: 10%;" like below OR remove last given code and add this new code.

@media (max-width: 719px){
.template-index .slide .content-outer-wrap {  position: absolute !important; top: 10%; }
.template-index .slide .content .title, .template-index .slide .content .tagline { color: #fff !important; }
}

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
luxurytrendz
Excursionist
17 0 7

Legend once again!

RoisinL
Tourist
12 0 2

Hello, I am trying to do this but I cant find where to insert this code. I am using Minimal theme. 

Is there a different place to put the code for this?

thanks 

0 Likes
Debdutto
New Member
9 0 0

Hi Am using Empire Theme having the same issue, I tried your code but it's not working for me.

 

Debdutto_0-1626342728044.png

 

Can You please help me?

 

0 Likes