What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Button on mobile version won't appear

Why doesn't the 'Shop Now' button appear on my mobile site?

Linnealoquest
Tourist
8 0 1

Hello!

 

Please help.

I have been trying to solve this problem for a while now without results. 

The "Shop now" button does not appear in the mobile version, only in the deskop version. 

My store: https://linnealoquest.com/

 

I have tried with this code: 

@media only screen and (max-width: 749px) {
.hero__btn {
position: relative;
top: 100px !important;
right: -20% !important;
}
}

 

Thank you in advance!

 

Kind regards, Jessica

Replies 9 (9)

laddisahsi
Shopify Partner
385 38 41

Hi @Linnealoquest 

You can follow the following steps:

1. Please go to the Online Store
2. Then Edit Code
3. Please find the theme.liquid file
4. And add the following code in theme.liquid file above the </head> tag

<style>
a.videoBoxInfoBtn {
    display: block !important;
}
</style>

 

 

laddisahsi_0-1695297595516.png

 

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
Linnealoquest
Tourist
8 0 1

Thank you Laddi!

 

I would like to have the button on top of the video just like in the deskop version. Is this posible?

 

Also, smaller sized just like the deskop version. 

 

Kind regards, Jessica

laddisahsi
Shopify Partner
385 38 41

@Linnealoquest 

Please add this css

 

@media screen and (max-width: 767px){
.videoBoxInfo {
    position: relative;
    top: -50%;
}
}

 

laddisahsi_0-1695298367583.png

 

 

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
Linnealoquest
Tourist
8 0 1

Thank you once again, but it is still not like the deskop version. 

 

I'll attached a screenshot of how i want the button. 

 

Thank you in advance!

 

JessicaSkärmavbild 2023-09-21 kl. 14.26.35.png

Asad24
Shopify Partner
180 36 33

try this css

write this custom css 

@media screen and (max-width: 767px)
.videoBackground .videoBoxInfoBtn {
 
display: inline-block !important;
margin-top: -100%;

}
banned
Linnealoquest
Tourist
8 0 1

Hi Asad!

 

It did not work, instead I got the code on top of the shop. See attached picture.

 

Best, JessicaSkärmavbild 2023-09-21 kl. 15.23.30.png

Asad24
Shopify Partner
180 36 33

CAN YOU PLEASE SHOW ME WHERE YOU HAVE ADDED THE CODE

banned

Asad24
Shopify Partner
180 36 33

write this custom css 

@media screen and (max-width: 767px)
(index):1744
.videoBackground .videoBoxInfoBtn {
 
display: inline-block !important;
margin-top: -100%;

}


Screenshot_25.png

banned
Linnealoquest
Tourist
8 0 1

Hello again!

 

I tried placing your code "

@media screen and (max-width: 767px)
(index):1744
.videoBackground .videoBoxInfoBtn {
 
display: inline-block !important;
margin-top: -100%;

}"
right under Laddis code
"@media screen and (max-width: 767px){
.videoBoxInfo {
position: relative;
top: -50%;
}
}"
It still doesnt work, where should I place it?
 
Jessica