Comment empêcher une div dans une colonne de passer sous une autre colonne avec un iframe?

Question

Sur cette page, j'ai un widget Photoplus à côté d'une vidéo (sous la bannière principale) dans des colonnes bootstrap séparées et je ne comprends pas pourquoi lorsque la page passe sous 1200 pixels, le widget passe sous la vidéo iframe. Je les ai mis tous les deux dans DIVs et les ai définis comme ceci:

<div class="photoplus"><script type='text/javascript.....</script></div> 
<div class="productpage-video"><iframe width="640" height="360" 
src="https://www.youtube.com/embed/..."></iframe></div> 

.photoplus { 
display:inline-block; 
width: 200px; 
height:332px; 
} 

.productpage-video { 
display:inline-block; 
} 

Comment je l'édite, de sorte qu'ils ne se chevauchent jamais?

Answer 1

Votre classe "photoplus" a une largeur fixe de 200px et devrait être en pourcentage de largeur. (100%) Et aussi le contenu interne de celui-ci devrait également être réglable en largeur comme 100%; Et "productpage-video" dans cette classe, iframe a une largeur fixe. Celui-là devrait aussi être 100%.

.photoplus { 
     display: inline-block; 
     height: 332px; 
     width: 100%; 
    } 

    .photoplus iframe { 
     width: 100% !important; 
    } 

    .productpage-video iframe { 
     width: 100% !important; 
    } 

Mais de toute façon lorsque de petites tailles (pour les tailles mobiles), mieux vaut déplacer la vidéo à la deuxième ligne.