Hello, I have this css that is used for the responsive of a legacy application. The web part is sometimes displayed inside iframe. In android the content of the iframe is responsive but in iPhone it is not responsive when the content is in an iframe, when it is without iframe the responsive is correct. I managed to solve that for iphone by applying this ....
body, iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
What I do not understand and how to solve that on iPad the content still does not look responsive inside an iframe, without iframe the responsive adapts.
I put all the css of the responsive:
/* ------------------ RESPONSIVE --------------- */
body, iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
/* ------------------ TABLET --------------- */
@media only screen and (max-width:768px) {
.contenidos_de { width: 712px; padding: 20px 0 0 50px; }
.pie ul.logopie li img { margin: 5px 0 20px 0px; }
.pie5 div, .pie5 div ul, .pie5 div ul li { float: left; width: 362px; }
.pie4 { float: left; width: 375px; padding: 0px; }
.pie5 { float: left; width: 600px; padding: 20px 10px 10px 72px; }
.desc_lateral p, .texto_lateral p { font-size: 17px; }
.desc_lateral .politica { font-size: 19px; }
.desc_lateral { float: left; width: 600px; padding: 10px 20px 10px 20px; margin: 0 0 26px 20px; }
.texto_lateral { float: left; width: 600px; padding: 20px 20px 20px 20px; margin: 10px 0 0 20px; }
.explicacion_booking { width: 600px; padding: 17px 20px 19px 20px; font-size: 17px; margin: 0 0 28px 20px; }
.titulo_pagina div div div div .pasos { width: 700px; }
.h_montaje ul { width: 340px; }
.solapa { font-size: 15px; }
.formu_dias input { font-size: 25px; }
.formu_dias div.bucador_1 { width: 331px; }
.pasos ul li a, .formu_dias div span.label, .h_salas .una .texto, .h_salas .texto .titulo, .h_salas .h_montaje > p, .pie5 ul li span, .titulo_pagina h2, .pie p { font-size: 16px; }
.cabecera .nombre_hotel .eligeotro div p, .menu3 .menu32 li a { font-size: 13px; }
.titulo_pagina h2 { width: 600px; }
.pasos ul { font-size: 14px; }
.formu_dias p { font-size: 18px; }
.solapa, .caja_v_4, .separadror_v, .caja_b_4 { width: 600px; }
.caja_b_4 { overflow: scroll; }
.botones { width: 343px; }
.formu_dias p, .formu_dias div.bucador_6 { width: 300px; }
.buscador, .formu_dias { width: 600px; }
.contenidos_iz { float: left; width: 696px; padding: 20px 0px 0px 67px; }
.pasos ul { width: 700px; }
.titulo_pagina5 div, .contenidos4, .contenidos_dentro, .menu3, .titulo_pagina3 { width: 375px; padding: 0px; }
.titulo_pagina5 div div div div { width: 100%; }
.menu3 .enlacesa { position: absolute; top: 10px; right: 10px; }
.cabecera .enlaces { float: left; padding: 30px 0px 0 0; }
.cabecera3 { width: inherit; }
.cabecera4 { float: none; width: inherit; padding: 0 0 0 18px; }
.cabecera .enlaces li.ayudarle { float: left; display: block; width: inherit; }
.cabecera .nombre_hotel { width: 700px; padding: 40px 0 41px 0px; }
.cabecera .nombre_hotel .eligeotro { float: none; }
/************************** PASO 2 **************************/
#cargando_modal p { left: 9%; }
.caja_v_h2 { float: left; width: 603px; }
.botonera_v { float: left; width: 620px; padding: 5px 0 30px 0; }
.botonera_v .boton_v { padding-top: 3px; }
.boton_v a { padding: 6px 20px; }
.resumen_derecha2 { float: right; width: 300px; margin: 0 -24px 0 0; }
.resumen_derecha .fechas, .caja_v_h2 h2, .resumen_derecha2 .recuerde, .resumen_derecha2 .fechas, .resumen_derecha .montaje div, .resumen_pago h2, .resumen_pago .resumen_un_dia, .detalletx, .contenidos_de .precio_desgl .linea, .contenidos_de .precio_recalcular .precio_desgl3 .detalle_dentro2 .linea p { font-size: 17px; }
.h_tabla table.titutabla td { font-size: 12px; }
/************************** PASO 3 **************************/
.caja_v_h2_suelto { width: 604px; }
.caja_v h2 { width: 323px; }
.personaliza_un_dia .dia_iz, .caja_habitaciones .abb ul { width: 500px; }
.caja_habitaciones .arr div, .caja_habitaciones .arr, .caja_servicios .abb p { width: 590px; }
.caja_habitaciones .abb li { width: 495px; }
.todoscafes, .todosmenus { float: left; width: 435px; }
.todosmenus label, .todoscafes label { float: none; }
.todoscafes label span { float: left; }
.n_todoscafes { left: 0px !important; }
.personaliza_un_dia .dia_iz p { padding: 0 0 0px 0px; }
.caja_v_h2_suelto h2, .personaliza_un_dia .dia_iz p, .caja_habitaciones .arr div a span.verr, .caja_v h2, .todosmenus input, .todoscafes select, .todosmenus select, .n_todoscafes h2, .n_todoscafes div.cerrar, .caja_servicios .arr div a span.verr { font-size: 17px; }
.caja_habitaciones .arr div a, .n_todoscafes ul li h3, .n_todoscafes ul li p, .n_todoscafes ul li p span, .caja_servicios .abb p, .caja_servicios .arr div a, .caja_servicios .abb li, .caja_habitaciones .abb li label.habnums input { font-size: 15px; }
.caja_habitaciones .arr p { float: left; width: 590px; font-size: 14px; padding: 5px 0 0 0; }
.caja_habitaciones .abb li, .todoscafes .ver, .todoscafes label span, .todosmenus label span, .todosmenus .ver { font-size: 14px; }
/************************** PASO 4 y FINAL **************************/
.accede .caja_v h2 { width: 597px; }
.h_acceso input, .h_acceso input, .h_acceso textarea, .h_acceso label { width: 570px; }
.politica_privacidad { left: 58px !important; }
.politica_privacidad div div div { width: 326px; }
.politica_privacidad div.cerrar { width: 306px; }
.boton_v button { font-size: 17px; padding: 7px 20px; }
.accede .caja_v h2 { font-size: 17px; }
.h_acceso label span, .h_acceso select, .h_acceso input, .h_acceso .heleido a { font-size: 15px; }
.politica_privacidad div { font-size: 13px; }
.h_fin { width: 300px; padding: 7px 0px 14px 20px; }
.h_fin p { font-size: 15px; line-height: 19px; }
/****************** ***********TABS************ ******************/
.h_salas .una.unamenus .texto { width: 600px; }
#mapaviaje { width: 600px !important; }
#contacto_popup { left: 0px !important; }
/************************** CADENA y BUSCAR **************************/
.listado_hoteles_cadena3 { width: 300px; }
.listado_hoteles_cadena ul li a { width: 582px; }
.cabecera .enlaces li.ayudarle div div, .cabecera .enlaces li.ayudarle div { background: none; }
.rosa { float: left; width: 323px; }
.rosa p, .contenido_resultados .una .tit a, .contenido_resultados .una .texto address, .contenido_resultados .una .texto p, .contenido_resultados .una .base a { font-size: 15px; }
.contenido_resultados, .contenido_resultados .info_resultados { width: 370px; }
.contenido_resultados .info_resultados p { width: 343px; font-size: 15px; }
.contenido_resultados .una .tit { width: 604px; }
.contenido_resultados .una { width: 300px; }
.volver_a_mi_busqueda_rvs { width: 328px; }
.volver_a_mi_busqueda_rvs div p { font-size: 13px; }
.contenido_resultados .una .texto { float: left; width: 705px; }
.contenido_resultados .una .arriba { float: left; width: 679px; padding: 20px 0 10px 0; }
.contenido_resultados .una .mapa { float: left; width: 250px; padding-top: 20px; }
.contenido_resultados .una .texto .text_de { float: left; width: 256px; }
/****************** ***********CELEBRACIONES************ ******************/
.formu_dias div.bucador_10, .formu_dias div.bucador_2 { width: 530px; }
.JsDatePickBox { left: -146px !important; }
.formu_dias div.bucador_1 span.label, .formu_dias div.bucador_10 p, .formu_dias div.bucador_10 label span, #contacto_popup p strong, #contacto_popup label, #contacto_popup label input { font-size: 15px; }
.contenidos_de .precio_recalcular .precio_desgl3 { float: left; width: 738px; }
.contenidos_de .precio_recalcular .precio_desgl4 { float: left; width: 751px; }
.contenidos_de .precio_desgl, .contenidos_de .precio_desgl_tit, .contenidos_de .linea_descuentos, .resumen_pago .resumen_un_dia .uno .uno_ti_3 { font-size: 15px; }
.contenidos_de .precio_recalcular .linea2 span, .caja_v_h2 { font-size: 17px; }
.contenidos_de .precio_desgl .linea p { float: left; width: 101px; }
.caja_v_p { float: left; width: 603px; font-size: 15px; }
.c_listado_menus .uno { float: left; width: 600px; }
.c_listado_menus .uno label { float: left; width: 579px; }
.c_listado_menus .uno .uno_esta_es { float: left; width: 278px; font-size: 17px; }
.c_listado_menus .uno .uno_nombre, .c_listado_menus .uno .uno_texto { float: left; width: 565px; font-size: 15px; line-height: 19px; }
.c_listado_menus { float: left; width: 622px; }
.pasos ul li.on { padding: 0 10px 0 0px; }
.c_listado_servicios .uno { float: left; width: 604px; }
.c_listado_servicios .uno label { float: left; width: 326px; }
.c_listado_servicios .uno .uno_nombre { float: left; width: 252px; font-size: 15px; }
.c_listado_servicios .uno .uno_precio { float: left; width: 232px; font-size: 15px; }
.c_listado_servicios, .c_listado_habitaciones { float: left; width: 364px; }
.c_listado_habitaciones .uno { float: left; width: 600px; }
.c_listado_habitaciones .uno ul { float: left; width: 308px; }
.c_listado_habitaciones .uno h2 { float: left; width: 296px; font-size: 15px; }
.c_listado_habitaciones .uno li { float: left; width: 568px; font-size: 13px; }
.c_listado_habitaciones .uno li label.habnums input { font-size: 15px; }
.politica_privacidad td { width: 344px; }
}
/* ------------------ MOBILE --------------- */
@media only screen and (max-width:479px) {
.pasos ul li { float: left; display: block; width: 100%; padding: 0px; background: inherit; }
.texto_lateral { float: left; width: 302px; padding: 20px 20px 20px 20px; margin: 10px 0 0 20px; }
.desc_lateral { float: left; width: 276px; padding: 10px 20px 10px 20px; margin: 0 0 26px 20px; }
.contenidos_de { width: 300px; padding: 20px 0 0 0px; }
.pie ul.logopie li img { margin: 5px 0 20px 0px; }
.pie5 div, .pie5 div ul, .pie5 div ul li { float: left; width: 362px; }
.pie4 { float: left; width: 375px; padding: 0px; }
.pie5 { float: left; width: 304px; padding: 20px 10px 10px 10px; }
.desc_lateral p, .texto_lateral p { font-size: 17px; }
.desc_lateral .politica { font-size: 19px; }
.explicacion_booking { padding: 10px 20px 10px 20px; font-size: 17px; margin: 0 0 10px 20px; width: 280px; }
.titulo_pagina div div div div .pasos { width: 353px; }
.h_montaje ul { width: 340px; }
.solapa { font-size: 15px; }
.formu_dias input { font-size: 25px; width: 50% !important; }
.formu_dias div.bucador_1 { width: 331px; }
.pasos ul li a, .formu_dias div span.label, .h_salas .una .texto, .h_salas .texto .titulo, .h_salas .h_montaje > p, .pie5 ul li span, .titulo_pagina h2, .pie p { font-size: 16px; }
.cabecera .nombre_hotel .eligeotro div p, .menu3 .menu32 li a { font-size: 13px; }
.titulo_pagina h2 { width: 300px; }
.pasos ul { font-size: 14px; }
.formu_dias p { font-size: 18px; }
.solapa, .caja_v_4, .separadror_v, .caja_b_4 { width: 316px; }
.caja_b_4 { overflow: scroll; }
.botones { width: 343px; }
.formu_dias p, .formu_dias div.bucador_6 { width: 300px; }
.buscador, .formu_dias { width: 350px; }
.contenidos_iz { float: left; width: 360px; padding: 20px 0px 0 10px; }
.pasos ul { width: 225px; }
.titulo_pagina5 div, .contenidos4, .contenidos_dentro, .menu3, .titulo_pagina3 { width: 375px; padding: 0px; }
.titulo_pagina5 div div div div { width: 100%; }
.menu3 .enlacesa { position: absolute; top: 10px; right: 10px; }
.cabecera .enlaces { float: left; padding: 30px 0px 0 0; }
.cabecera3 { width: inherit; }
.cabecera4 { float: none; width: inherit; padding: 0 0 0 0px; }
.cabecera .enlaces li.ayudarle { float: left; display: block; width: inherit; }
.cabecera .nombre_hotel { width: 360px; padding: 39px 0 10px 10px; }
.cabecera .nombre_hotel .eligeotro { float: none; }
/************************** PASO 2 **************************/
#cargando_modal p { left: 9%; }
.caja_v_h2 { float: left; width: 326px; }
.botonera_v { float: left; width: 343px; padding: 5px 0 30px 0; }
.botonera_v .boton_v { padding-top: 3px; }
.boton_v a { padding: 6px 20px; }
.resumen_derecha2 { float: right; width: 300px; margin: 0 -24px 0 0; }
.resumen_derecha .fechas, .caja_v_h2 h2, .resumen_derecha2 .recuerde, .resumen_derecha2 .fechas, .resumen_derecha .montaje div, .resumen_pago h2, .resumen_pago .resumen_un_dia, .detalletx, .contenidos_de .precio_desgl .linea, .contenidos_de .precio_recalcular .precio_desgl3 .detalle_dentro2 .linea p { font-size: 17px; }
.h_tabla table.titutabla td { font-size: 12px; }
/************************** PASO 3 **************************/
.caja_v_h2_suelto { width: 323px; }
.caja_v h2 { width: 323px; }
.personaliza_un_dia .dia_iz, .caja_habitaciones .abb ul { width: 293px; }
.caja_habitaciones .arr div, .caja_habitaciones .arr, .caja_servicios .abb p { width: 300px; }
.caja_habitaciones .abb li { width: 277px; }
.todoscafes, .todosmenus { float: left; width: 298px; }
.todosmenus label, .todoscafes label { float: none; }
.todoscafes label span { float: none; }
.n_todoscafes { left: 0px !important; }
.personaliza_un_dia .dia_iz p { padding: 0 0 0px 0px; }
.caja_v_h2_suelto h2, .personaliza_un_dia .dia_iz p, .caja_habitaciones .arr div a span.verr, .caja_v h2, .todosmenus input, .todoscafes select, .todosmenus select, .n_todoscafes h2, .n_todoscafes div.cerrar, .caja_servicios .arr div a span.verr { font-size: 17px; }
.caja_habitaciones .arr div a, .n_todoscafes ul li h3, .n_todoscafes ul li p, .n_todoscafes ul li p span, .caja_servicios .abb p, .caja_servicios .arr div a, .caja_servicios .abb li, .caja_habitaciones .abb li label.habnums input { font-size: 15px; }
.caja_habitaciones .arr p { float: left; width: 292px; font-size: 14px; padding: 5px 0 0 0; }
.caja_habitaciones .abb li, .todoscafes .ver, .todoscafes label span, .todosmenus label span, .todosmenus .ver { font-size: 14px; }
/************************** PASO 4 y FINAL **************************/
.accede .caja_v h2 { width: 313px; }
.h_acceso input, .h_acceso input, .h_acceso textarea, .h_acceso label { width: 300px; }
.politica_privacidad { left: 0px !important; }
.politica_privacidad div div div { width: 326px; }
.politica_privacidad div.cerrar { width: 306px; }
.boton_v button { font-size: 17px; padding: 7px 20px; }
.accede .caja_v h2 { font-size: 17px; }
.h_acceso label span, .h_acceso select, .h_acceso input, .h_acceso .heleido a { font-size: 15px; }
.politica_privacidad div { font-size: 13px; }
.h_fin { width: 300px; padding: 7px 0px 14px 20px; }
.h_fin p { font-size: 15px; line-height: 19px; }
/************************** CADENA y BUSCAR **************************/
.listado_hoteles_cadena3 { width: 300px; }
.listado_hoteles_cadena ul li a { width: 333px; }
.cabecera .enlaces li.ayudarle div div, .cabecera .enlaces li.ayudarle div { background: none; }
.rosa { float: left; width: 323px; }
.rosa p, .contenido_resultados .una .tit a, .contenido_resultados .una .texto address, .contenido_resultados .una .texto p, .contenido_resultados .una .base a { font-size: 15px; }
.contenido_resultados, .contenido_resultados .info_resultados { width: 370px; }
.contenido_resultados .info_resultados p { width: 343px; font-size: 15px; }
.contenido_resultados .una .tit { width: 315px; }
.contenido_resultados .una { width: 300px; }
.volver_a_mi_busqueda_rvs { width: 328px; }
.volver_a_mi_busqueda_rvs div p { font-size: 13px; }
.contenido_resultados .una .texto { float: left; width: 317px; }
.contenido_resultados .una .arriba { float: left; width: 336px; padding: 20px 0 10px 0; }
.contenido_resultados .una .mapa { float: left; width: 250px; padding-top: 20px; }
.contenido_resultados .una .texto .text_de { float: left; width: 256px; }
#contacto_popup { left: 0px !important; }
/****************** ***********TABS************ ******************/
.h_salas .una.unamenus .texto { width: 307px; }
#mapaviaje { width: 319px !important; }
/****************** ***********CELEBRACIONES************ ******************/
.formu_dias div.bucador_10, .formu_dias div.bucador_2 { width: 323px; }
.JsDatePickBox { left: -146px !important; }
.formu_dias div.bucador_1 span.label, .formu_dias div.bucador_10 p, .formu_dias div.bucador_10 label span, #contacto_popup p strong, #contacto_popup label, #contacto_popup label input { font-size: 15px; }
.contenidos_de .precio_recalcular .precio_desgl3 { float: left; width: 349px; }
.contenidos_de .precio_recalcular .precio_desgl4 { float: left; width: 343px; }
.contenidos_de .precio_desgl, .contenidos_de .precio_desgl_tit, .contenidos_de .linea_descuentos, .resumen_pago .resumen_un_dia .uno .uno_ti_3 { font-size: 15px; }
.contenidos_de .precio_recalcular .linea2 span, .caja_v_h2 { font-size: 17px; }
.contenidos_de .precio_desgl .linea p { float: left; width: 101px; }
.caja_v_p { float: left; width: 326px; font-size: 15px; }
.c_listado_menus .uno { float: left; width: 326px; }
.c_listado_menus .uno label { float: left; width: 308px; }
.c_listado_menus .uno .uno_esta_es { float: left; width: 278px; font-size: 17px; }
.c_listado_menus .uno .uno_nombre, .c_listado_menus .uno .uno_texto { float: left; width: 299px; font-size: 15px; line-height: 19px; }
.c_listado_menus { float: left; width: 363px; }
.pasos ul li.on { padding: 0 10px 0 0px; }
.c_listado_servicios .uno { float: left; width: 325px; }
.c_listado_servicios .uno label { float: left; width: 326px; }
.c_listado_servicios .uno .uno_nombre { float: left; width: 252px; font-size: 15px; }
.c_listado_servicios .uno .uno_precio { float: left; width: 232px; font-size: 15px; }
.c_listado_servicios, .c_listado_habitaciones { float: left; width: 364px; }
.c_listado_habitaciones .uno { float: left; width: 324px; }
.c_listado_habitaciones .uno ul { float: left; width: 308px; }
.c_listado_habitaciones .uno h2 { float: left; width: 296px; font-size: 15px; }
.c_listado_habitaciones .uno li { float: left; width: 312px; font-size: 13px; }
.c_listado_habitaciones .uno li label.habnums input { font-size: 15px; }
.politica_privacidad td { width: 344px; }
}