I Want To Move The Button Label On Video Background To The Center Of The Debut Theme

Store Design
,
1

Hello,

I am trying to move the button label from the bottom to the center and also I will like the appearance of the button to be transparent, meaning only the outline.

Theme: Debut

Site: JETLAGMODE.com

Can someone please help me? :downcast_face_with_sweat:

Thank you very much in advance.

2

UPDATE: I finally manage to make the button transparent leaving only the outline. Also I manage to move it to the center but on the mobile screen it doesn’t show the same way although it is still transparent it is not center at all.

Does anyone have a solution for this?

3

Hi @Jetlag_Mode

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_2-1673750263414.png
PageFlyVictor_2-1673750263414.png400×225 38.4 KB

PageFlyVictor_3-1673750263334.png
PageFlyVictor_3-1673750263334.png394×849 187 KB

Hope this answer helps.

Best regards,

Victor | PageFly

4

Hi @Jetlag_Mode ,

Glad to support you today.

To can move it to the center, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

GemPages_0-1673752952526.png
GemPages_0-1673752952526.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

5

Hi, thank you for replying, unfortunately the code didn’t work although the shop button looks better on my mobile screen it is not center anymore in my computer screen. Also, with the SHOP NOW button I need to move the NEW ARRIVALS title as well, one goes under the other and both in the middle of the background video.

6

Thank you for replying, still not working, nothis changes when I add the code…

7

Help me add this code on file theme.scss.css

@media screen and (max-width: 767px){
#shopify-section-4925efc0-5d7a-40f6-832f-db7f2c8a396c h1.videoBoxInfoTitle {
right: 24% !important;
}
#shopify-section-4925efc0-5d7a-40f6-832f-db7f2c8a396c a.videoBoxInfoBtn {
right: 34% !important;
}
#shopify-section-4925efc0-5d7a-40f6-832f-db7f2c8a396c h1.videoBoxInfoTitle {
right: 22% !important;
}
#shopify-section-4925efc0-5d7a-40f6-832f-db7f2c8a396c a.videoBoxInfoBtn {
right: 34% !important;
}
#shopify-section-4925efc0-5d7a-40f6-832f-db7f2c8a396c h1.videoBoxInfoTitle {
right: 17% !important;
}
#shopify-section-4925efc0-5d7a-40f6-832f-db7f2c8a396c a.videoBoxInfoBtn {
right: 30% !important;
}
}
1 Like
8

Thank you so much for taking the time to do this for me unfortunately it still doesn’t quite work, it is still not in the middle of the page or aligned with the SHOP NOW button.

IMG_C733042AD2E2-1.jpeg
IMG_C733042AD2E2-1.jpeg1290×2796 218 KB

I modify your code changing the second to last “right %” from 17 to 22 and it looks a little bit more center on the phone screen when it is in a vertical position, but as soon as I turn the mobile to a horizontal position it moves and it is not centered anymore nor aligne with the SHOP NOW button.

IMG_7063.PNG
IMG_7063.PNG1290×2796 360 KB

IMG_7064.PNG
IMG_7064.PNG2796×1290 397 KB

Do you think you can help me with this last detail please? :folded_hands:t2:

Kind regards