FROM CACHE - en_header

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

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
11014 2377 3400

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 | Click here GemPages The most powerful Shopify page builder.

View solution in original post

Replies 8 (8)
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
luxurytrendz
Excursionist
17 0 7

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

dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
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
11014 2377 3400

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 | Click here GemPages The most powerful Shopify page builder.
luxurytrendz
Excursionist
17 0 7
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 

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?