When users are booking on different platforms, the size of the screen may vary. In order to create the easiest booking experience, our reservation engine adapts to the size, length and height of the screen.

In order to avoid a fixed longitude in all cases and to prevent the scroll from appearing, we use Media Queries to adapt it to the different screen sizes of any given device.

Use a class in the iframe:

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

Paste the following styles before the </head> tag:

<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>

From now on, the height of the iframe will change depending on the width of the screen and the html block that contains it. The following table shows the relationship of measures.