How can I center a button overlay on a video for both desktop and mobile?

Technical Q&A
1

Hi,

We are trying to create a button overlayed on top of a video on the home page.

Since the video is a custom liquid i am writing code in the “custom-liquid.liquid”

Right now we are having trouble with the positioning. We need the positioning to be in the center of the screen, both on desktop and mobile. But right now it is only centered on desktop, it is not visible on mobile.

Open for all suggestions on changing it since i am not used to coding and do not know what i am doing.

My code:

<div class="cta_text">
    <a href="/products/suffer" class="btn">SHOP</a>
</div>

<style>
.cta_text a {
    background-color: #000;
    color: #fff;
    padding: 8px 15px;
    margin-right: 1px;
  
  position: absolute;
top:300px;
right:675px;
z-index: 999;
  }
</style>
2

If i understood you correctly you mean in the theme editor? The problem is that if i change the positioning to fit mobile it will not fit desktop. So I need another sort of positioning that is the same across all platforms but i do not know how to do that.

3

What? I think you have misunderstood my problem.

This is not about the product.

This is about coding a button on the homepage and i need it positioned in the center of the screen, across all platforms.

4

Hi @GalleryOfPunk , Can you please share your store url, so I can help you with this?