Thinner Video on Desktop and button add - DAWN THEME

Store Design
, , ,
1

Hello,

I am trying to make my video thinner but still central focused on desktop, I like how it looks on mobile.

I also want to be able to add a button.

Video at top of page: https://obadiahcoffee.com/pages/seasonal-subscription

I created a custom section called “full width video”.

Thank you.

2

Hi @andrew72

To make your video thinner but still centered on desktop while maintaining its look on mobile, you can adjust the video container’s width using CSS. Here’s how to do it:

  1. Add custom CSS for your video container:

.full-width-video {

max-width: 800px; /* Adjust width as needed */

margin: 0 auto; /* Center the video */

}

@media (max-width: 768px) {

.full-width-video {

width: 100%; /* Keep full width on mobile */

}

}

  1. To add a button below the video, you can use HTML and CSS:

Subscribe Now

And style it:

.video-button {

display: block;

margin: 20px auto;

padding: 10px 20px;

background-color: #000;

color: #fff;

border: none;

cursor: pointer;

}

This keeps your video responsive and centered on desktop, while the button will appear below the video.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy