Solved

white spaces above and below an embedded vimeo (Brooklyn theme)

hugon789
Excursionist
20 0 6

Im using Brooklyn theme, and every time I embed a vimeo video to the home page it creates big white spaces above and below the video.

What should I do? Thank you in advance.

Video space technical problem.jpeg

Accepted Solution (1)
diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

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

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > timber.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
    .product-single__description iframe[src*='vimeo']{
    max-height: 50vw;
    margin-top: 10px;
}
}



Please let me know whether it works.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 9 (9)

diego_ezfy
Shopify Partner
2934 562 883

Hello @hugon789,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

hugon789
Excursionist
20 0 6

Kinjaldavra
Shopify Partner
2302 570 1422

hello @hugon789 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

hugon789
Excursionist
20 0 6
diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

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

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > timber.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
    .product-single__description iframe[src*='vimeo']{
    max-height: 50vw;
    margin-top: 10px;
}
}



Please let me know whether it works.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

hugon789
Excursionist
20 0 6

It worked out great! Thanks for the help!

Redageek
Visitor
2 0 0
What about the product page Please ?
diego_ezfy
Shopify Partner
2934 562 883

@Redageek, 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.scss.liquid, timber.scss or theme.css (it varies from theme to theme) and paste this at the bottom of the file:

 

@media (max-width: 767px){
     iframe[src*='vimeo']{
    max-height: 50vw;
}
}

 



Please let me know whether it works.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

Redageek
Visitor
2 0 0

Thank you,

it worked on the mobile-only, my theme is Brooklyn

Could you help adjust it on the desktop?