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

[Linnealoquest]

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

[laddisahsi]

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>

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

Laddi

[Linnealoquest]

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]

@Linnealoquest 

Please add this css

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

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

Laddi

[Linnealoquest]

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!

Jessica

[Asad24]

try this css

write this custom css 

@media screen and (max-width: 767px)

.videoBackground .videoBoxInfoBtn {

display: inline-block !important;
margin-top: -100%;

}

[Linnealoquest]

Hi Asad!

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

Best, Jessica

[Asad24]

CAN YOU PLEASE SHOW ME WHERE YOU HAVE ADDED THE CODE

[Asad24]

write this custom css 

@media screen and (max-width: 767px)

(index):1744

.videoBackground .videoBoxInfoBtn {

display: inline-block !important;
margin-top: -100%;

}

 

[Linnealoquest]

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