Have your say in Community Polls: What was/is your greatest motivation to start your own business?

changing video size on desktop view

Solved

changing video size on desktop view

getsunlight
Visitor
2 0 1

Hi, I have been trying to configure the script to make the desktop view for a vertical loop video smaller for desktop, but i couldn't find it. I'm using Dawn theme with custom video autoplay liquid from (https://websensepro.com/blog/how-to-add-autoplay-video-section-in-shopify-without-app-dawn-v15/).

 

The website loads ok on mobile, just too big on desktop. Other codes shared here didn't work.

 

Any help welcome!

 

Site: www.getsunlight.sg

Accepted Solution (1)

Sweans
Shopify Partner
428 88 126

This is an accepted solution.

Hi @getsunlight ,

To address the issue with the vertical loop video size on the desktop view, you can add custom CSS to adjust the video dimensions. Here's how to do it in the Dawn theme:

1. Go to Online Store > Themes.
2. Click on Actions next to your current theme and select Edit code.
3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.
4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following custom CSS code:

<style>
@media only screen and (min-width: 768px) {
.wbs-pck__image__wrapper {
height: 100vh; /* or your preferred height*/
}
}
</style>

Sweans_0-1721883822757.png

 


5. Click Save to apply the changes.

This approach allows you to customize the size of your video on desktop devices, ensuring it doesn't appear too large.

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




- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

View solution in original post

Replies 3 (3)

Sweans
Shopify Partner
428 88 126

This is an accepted solution.

Hi @getsunlight ,

To address the issue with the vertical loop video size on the desktop view, you can add custom CSS to adjust the video dimensions. Here's how to do it in the Dawn theme:

1. Go to Online Store > Themes.
2. Click on Actions next to your current theme and select Edit code.
3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.
4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following custom CSS code:

<style>
@media only screen and (min-width: 768px) {
.wbs-pck__image__wrapper {
height: 100vh; /* or your preferred height*/
}
}
</style>

Sweans_0-1721883822757.png

 


5. Click Save to apply the changes.

This approach allows you to customize the size of your video on desktop devices, ensuring it doesn't appear too large.

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




- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

BSS-TekLabs
Shopify Partner
2350 688 810

- Here is the solution for you @getsunlight 
- Please follow these steps:

step.png

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.wbs-pck__image__wrapper {
    height: 100vh !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1721909239892.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
getsunlight
Visitor
2 0 1

Hi, thank you!

 

is there a way to retain the height so that the ceiling light is in full display, but to scale it down in general? It would be ok with borders at the side.