Personalized checkout and custom promotions with Shopify Scripts
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
Solved! Go to the solution
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>
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
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>
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
- Here is the solution for you @getsunlight
- Please follow these steps:
- 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:
- 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
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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024