Adding left padding to video Highlight Theme

Store Design
1

Trying to add 40% left padding to a video on my Shopify page for desktop only.

CSS I was using is below, just unsure of the class to use for the video.

@media (min-width:768px) {

#shopify-section-template–15985039868146__16486326532bfec20e .video-popup {
padding-left: 40%;
}

}

URL: https://soundlab-melbourne.myshopify.com/pages/specialised-lessons

Password: thesoundlabmelbourne

Any help would be appreciated, thankyou

Wireframe example of how it should look with 40% padding
Wireframe example of how it should look with 40% padding1600×2114 319 KB

!

2

@Hannaht2 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
    .mount-video-popup [id*='video-popup']{
    max-width: 40%;
    width: 100%;
}

.mount-video-popup {
display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    top: -170px;
    margin-bottom: -80px;
}

.mount-video-popup > *{
        width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
}

}

diego_ezfy_0-1651977904403.png
diego_ezfy_0-1651977904403.png1723×648 92.4 KB

Kindly bear in mind that ideally you’d need the title to be coded into the video section to ensure it works properly on all browsers and devices. This is not the best solution and may break on other devices. Unfortunately this is the best that can be done in a copy/paste situation.

Kind regards,
Diego

3

Thank you so so much!