Solved

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

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

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3693

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 8 (8)

dmwwebartisan
Shopify Partner
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
luxurytrendz
Excursionist
17 0 7

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

dmwwebartisan
Shopify Partner
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12280 2546 3693

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
luxurytrendz
Excursionist
17 0 7

Legend once again!

Debdutto
New Member
11 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?

 

RoisinL
Tourist
12 0 1

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