Video isn't centering in my (member's only) 'Studio' theme page

Store Design
,

Topic summary

A user encountered an issue with a Vimeo video not centering on a members-only page using Shopify’s Studio theme.

Proposed Solution:

  • Add CSS code to the theme’s stylesheet (base.css/theme.css) targeting .video-container with text-align: center and video element styling
  • The code should set max-width: 100%, height: auto, and display: inline-block

Troubleshooting:

  • Initial CSS implementation in assets/base.css did not resolve the centering issue
  • Screenshots were provided showing the video alignment before and after clicking play
  • The helper requested login credentials via direct message to investigate further

Resolution:

  • Shopify support ultimately resolved the issue by instructing the user to remove some code
  • Specific details of the final solution were not shared in the thread
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Shopify ‘Studio’ theme and have linked a Vimeo video in a members-only page and it’s not centering. I have 15+ pages like this. Can someone assist? Thanks

Screen Shot 2024-08-20 at 2.04.08 PM.png
Screen Shot 2024-08-20 at 2.04.08 PM.png1359×731 87.3 KB

2

Hi @Divinart ,

Please see the solution below:

  1. In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”.

  2. Next you can find Main.css/theme.css/base.css/style.css(it will be based on your theme file) Add this css code:

.video-container 
{ 
text-align: center;
 } 
video { 
max-width:100%; 
height: auto; 
display: inline-block; 
}

Here “.video-container” is the outer class of the video.

Please note that as we don’t have the store link, the above code is based on our assumption. so if it doesn’t work please share the store link with us so we can provide you the correct solution.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

3

Hello Sweans,

I added the code as mentioned to ‘assets/base.css’ and it didn’t work. The page link is: https://divinart.studio/pages/member-afraid-to-be-me . It is a members-only page behind a pay wall. Let me know if you need login credentials. Thanks for your help.

Added the code in base.css
Added the code in base.css437×371 25.8 KB

After I hit 'play'
After I hit 'play'1315×744 53.3 KB

What it looks like before I hit 'play'
What it looks like before I hit 'play'1358×764 146 KB

4

Hi @Divinart ,

We believe we can assist you with this issue. To proceed, we may need your login credentials. Could you please send them to us via direct message?

5

Shopify support helped me. They told me to remove some code.

Thanks,

K