Quando os utilizadores reservam nas diferentes plataformas, o tamanho do ecrã pode variar. De modo a criar uma experiência de reserva mais intuitiva, o nosso widget de reservas adapta-se ao tamanho, largura e altura do ecrã.

De forma a evitar uma longitude fixa e prevenir que apareça o scroll, usamos media queries para adaptar o widget aos diferentes tamanhos de ecrã de qualquer dispositivo.

Utilize o atributo ‘classe’ no iframe:

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

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

<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 será responsiva em função da largura do ecrã e do bloco de html que a contém. Na seguinte tabela, estão indicadas as relações entre medidas: