Como fazer para que o seu widget se adapte aos diferentes tipos de ecrã de forma automática. O nosso módulo de reservas tem uma longitude dinâmica, quer dizer que o tamanho da altura difere durante o proceso de reserva.

Para não termos uma longitude fixa em todos os casos e evitar que apareça o scroll usamos media queries para adpatá-lo aos diferentes tamanhos de ecrã de qualquer dispositivo.

Utiliza um class no iframe:

<iframe class="thefork" src="https://module.lafourchette.com/pt_PT/module/56567-a3fd1"></iframe>

Cole antes da etiqueta </head> os seguintes estilos:

<style type="text/css">

.thefork{
width: 100%;
border:none;
overflow: scroll;
}
/* Media queries widget */ 
@media only screen and (max-width : 320px) { 
    .thefork{
    min-height: 840px;
    }
}
@media only screen and (min-width : 321px) and (max-width : 516px){
    .thefork{
    min-height: 650px; 
    }
}
@media only screen and (min-width : 517px) { 
    .thefork{
    min-height: 550px; 
    }
}
</style>

A partir de agora a altura do iframe irá trocando em função do comprimento do ecrã e do html que contem. Na seguinte tabela indica a relação entre as medidas: