affiancare due iframe in modo responsive

joe76

affiancare due iframe in modo responsive

Salve a tutti ho due div affiancati che contengono due iframe dentro un altro div che li contiene...ma in mobile si restringono al 49% invece io vorrei che il secondo iframe slittasse sotto al primo...come posso fare? vi posto il codice...

<div class="iframe-container">
<div style="width: 49%; display: inline-block; vertical-align: top;">iframe</div>
<div style="width: 49%; display: inline-block;vertical-align: top;">iframe</div>
</div>

.iframe-container {

width: 100%; 
height: 0; 
padding-bottom: 35.25%; /* 16:9 */
position: relative;

}

iframe {

width: 49%; 
height: 100%; 
position: absolute; 
top: 0;

}

glorialchemica

Ciao joe76,
credo tu stia facendo un po' di confusione sull'uso dei css. Se metti gli stili in linea questi avranno sempre la precedenza rispetto a quelli inseriti nel foglio di stile (si chiamano appunto "a cascata")
se vuoi che i tuoi iframe siano uno sotto l'atro sui dispositivi mobili devi impostare le regole ai div che li contengono. Ad esempio:

<div class="iframe-container">
<div class="content">iframe</div>
<div class="content">iframe</div>
</div>

.iframe-container {

/...... tutte le altre regole che ti servono ...../

}

.content {
width: 49%;
float:left;

/...... + tutte le altre regole che ti servono ...../

}

@media screen and (max-width: 768px){
.content {
width: 100%;
}

}

Ti consiglio di fare di una ricerca sul posizionamento dei div e sulle regole per la visualizzazione su mobile.
Un saluto

joe76

grazie glorialchemica...in effetti sto ancora imparando e non avevo fatto caso a questo "piccolo" dettaglio...ora provo...grazie mille!

joe76

ok ci sono riuscito...ma ho dovuto modificare il codice creando una regola per ognuno dei div se no si sovrappongono
<div class="iframe-container">
<div class="content1">iframe</div>
<div class="content2">iframe</div>
</div>

css normale

.content1 {
width: 49%;
vertical-align: top;
float:left;
}
.content2 {
width: 49%;
vertical-align: top;
float:right;
}

css responsive

@media screen and (max-width: 768px){

.content1 {
width: 100%;
display:inline-block;
margin-bottom:209px;

}
.content2 { 
    width: 100%;

position:relative;
padding-bottom:7%;

}

grazie di avermi dato l'input!