Topic summary
A user needed to change the color of a video play button icon on their mobile website to better match their site’s design. The icon’s default color wasn’t visually compatible with their theme.
Solution provided:
- Navigate to Online Store → Theme → Edit code
- Locate the
stylesheet.cssfile - Add custom CSS targeting
.button.btn.video-control.video-control__playwithbackground: red !important;within a media query for mobile screens (max-width: 767px) - Save the changes
Outcome: The CSS modification successfully resolved the issue, allowing the video icon color to align with the website’s aesthetic.
Hello! My Video Icon for Mobile Color is not what I like. Is there any way I can change it so it flows with my website? Please let me know! Thanks!
Hi @Meggy_b
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file stylesheet.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
button.btn.video-control.video-control__play {
background: red !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Thank you so much Henry!! It worked!
1 Like
You are welcome @Meggy_b 