Hello guys, I have this code here for videos, only on iphone 11 spaces appear between videos, here’s a source code and preview video attached. Url: https://www.welcomesunnygarments.com.br/pages/lancamento
I had to change my URL for: https://www.welcomesunnygarments.com.br/pages/test-page
I use Down theme and custom liquid section. This problem only occurs on iphone 11, both by safari and chrome.
On android / chrome there are no problems.
.video_product_settings_mobile{ width: 100%; display: flex; flex-direction: column; margin-bottom: -70px; } .align_center_mobile{ display: flex; justify-content: center; } .title_lookbook_mobile{ margin: 40px 0 20px; } .button_black_mobile { font-size: 1.5rem; letter-spacing: .1rem; line-height: 1.2; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; font: inherit; padding: 0.9rem 3rem 1.1rem; text-decoration: none; border: 0.1rem solid transparent; border-radius: 0; background-color: black; box-shadow: 0 0 0 0.1rem rgba(var(--color-button),var(--alpha-button-border)); color: white; min-width: 12rem; min-height: 4.5rem; transition: box-shadow var(--duration-short) ease; -webkit-appearance: none; appearance: none; margin: 0 0 60px; } @media screen and (min-width: 768px){ .video_product_settings_mobile{ display: none; } }
<video
class=“video_settings_mobile”
alt=“video mostrando a colecao”
loop autoplay playsinline muted
<video
class=“video_settings_mobile”
alt=“video mostrando a colecao”
loop autoplay playsinline muted
I put this in base.css file but not result:
@media(max-width: 767px){
section#shopify-section-template–16318870126842__166048803787f2fdc3 video {
margin: 0!important;
padding: 0!important;
}
}
