Button and Text not showing on embedded video (Debut theme)

Solved
Jeyswank
New Member
3 0 0

Hey guys,

As the 20mb video limit was quite restricting for our store, we embedded a video using Imgur.

However, now the overlay text and "shop now" button appear at the bottom of the video instead of centered in the middle. Anyone have any ideas?

 

https://shopcyd.com/

0 Likes

This is an accepted solution.

@Jeyswank  Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

.content--centered{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.content--centered *{
    text-align: center !important;

}

.homepage-image{
    position: relative;
}
.homepage-image:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .2;
}

@media (max-width: 767px){
    .homepage-image{
    font-size: 12px;
}
}

 


Please let me know whether it works.

Kind regards,
Diego

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Jeyswank
New Member
3 0 0

Thank you so so much! Any ideas on how to change font size and color?

0 Likes

@Jeyswank you're welcome!

To change font-size on mobile just change the value 12px to any value you want.
To change color, change the word white to any hex color you want, like #cccccc


For other specific changes it would require more customization, feel free to contact me personally if you need it.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes