Button working on mobile version but not desktop version of website

Technical Q&A
, , ,

Topic summary

Issue: A custom button over a video background was visible on both mobile and desktop but only clickable on mobile (Shopify store link provided).

Attempts/Guidance:

  • Initial advice suggested adding code in theme.liquid before the tag (specific code not provided).
  • A follow-up provided step-by-step instructions to edit base.css.

Fix implemented:

  • Added a CSS rule to increase the stacking order of the video wrapper (e.g., targeting .fullscreen-video-wrap) using z-index: 999 !important in base.css.

Explanation:

  • z-index controls the layering of elements; adjusting it likely prevented an overlapping element from blocking clicks on desktop.

Artifacts:

  • Screenshots illustrated where to edit base.css and the resulting behavior; these visuals were central to following the steps.

Outcome/Status:

  • The button is now clickable on desktop; the original poster confirmed the solution worked.
  • Discussion resolved; no open questions or further actions noted.
Summarized with AI on December 24. AI used: gpt-5.
1

I have added a custom button with a hyperlink on my video background, the button is visible on both desktop and mobile but only actively clicks on mobile.

My website is: https://ilwil-period.com/.

Would love some help with this debugging, as i think potentially there is a bug with the theme and my code?

1 Like
2

Hi @christiebianco ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.videoBackground .fullscreen-video-wrap {
    z-index: 999 !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721143392202.png
BSSTekLabs_0-1721143392202.png1374×822 98.9 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

this worked! thank you SO much