Thank you Laddi!
I would like to have the button on top of the video just like in the deskop version. Is this posible?
Also, smaller sized just like the deskop version.
Kind regards, Jessica
Topic summary
Main issue: The “Shop now” button appears on desktop but not on the mobile version of a Shopify store with a video hero section.
What’s been tried: The store owner first used a mobile CSS media query adjusting .hero__btn positioning, without success. A helper suggested adding code in theme.liquid (above ) and then provided mobile CSS to position .videoBoxInfo higher (-50%).
Goal clarification: The owner wants the button overlaid on top of the video on mobile, matching desktop placement and smaller size.
Further suggestions: Another helper proposed custom CSS targeting .videoBackground .videoBoxInfoBtn (display: inline-block !important; margin-top: -100%). The owner tested but didn’t achieve the desktop-like result.
Latest update: After adding the suggested CSS, the code appeared as visible text on the storefront on mobile, indicating it may have been inserted in the wrong place or without proper style tags. The helper asked where the code was added; the owner replied it was placed under the prior CSS and asked for exact placement guidance.
Status: Unresolved. Key next step is correct placement of the CSS (likely within a stylesheet or style tags), to properly overlay and size the button on mobile. Screenshots were shared to illustrate desired positioning and the issue.