Video marge on customized product page

Wishpools
Excursionist
20 0 3

Hi, I tried to customize the Product Page in Dawn 2.0.

After inserting a video section, I found that section looks too big on the desktop. Is anybody know how to adjust the video margin or padding?

0 Likes

Hello @Wishpools ,
Welcome to the Shopify community!
Share your store url with password.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Wishpools
Excursionist
20 0 3

Hi, the link is here. You can see the Video in the middle of the page.

https://www.wishpools.com.au/products/power-shower-head-high-pressure-water-saving-perforated-free-s...

0 Likes
suyash1
Shopify Partner
3485 381 560

@Wishpools - please addd this css and check, adjust number as per the need

@media screen and (min-width:1200px){
.video-section .title{text-align: center;}

.video-section__media iframe {
width: 60%;    height: 60%;    
margin: 0 auto;    left: 0;    right: 0;}
}
Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes

Hi @Wishpools ,

.video-section.page-width {
    width: 50%;
}


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->video-section.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Wishpools
Excursionist
20 0 3

@suyash1 Hi, which file should I open and insert the code?

0 Likes
suyash1
Shopify Partner
3485 381 560

@Wishpools  go to online store->themes->actions->edit html/css

search base.css and add to the very end of it

Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes

@Wishpools ,

Online Store->Theme->Edit code->Assets->video-section.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Wishpools
Excursionist
20 0 3

I inserted this code at the bottom of online Store->Theme->Edit code->Assets->video-section.scss.liquid and found this can limit video frame but can not change the cover image frame (wherever has a cover image or not). Is there any way to change both the cover image and video frame?

@media screen and (min-width:1200px){
.video-section .title{text-align: center;}

.video-section__media iframe {
width: 60%; height: 60%;
margin: 0 auto; left: 0; right: 0;}
}

0 Likes
suyash1
Shopify Partner
3485 381 560

@Wishpools - try this css

@media screen and (min-width:1200px){
.video-section__poster img{
    height: 60% !important;
    width: 60% !important;
    left: 0;    right: 0;    margin: 0 auto;
}
}
Need training? I can train you to learn shopify.

You are welcome to contact me, my email - suyash.patankar@gmail.com
0 Likes