iframe

teitbite

janjak Hi. I think the closing iframe code is wrong:

  <iframe/>

should be:

  </iframe>

janjak

That's right, </iframe> is better than <iframe/> ;-)
But this change nothing on the page...

By adding this custom css code, the text under the iframe is comming back..
`iframe {
border: none;

}

.output {
background: #eee;
}`

It reinforces my idea that the problem may come from the template...

Cheers,

saguaros

janjak

Hi,

As I can see that the iframe is showing now on your site, may I know which issue is left here so I can check for you?

janjak

Hi !
Yes the iframe is now displayed on the page ;-) but it is truncated ;-(
The link just above "Vérifier les disponibilités" shows the iframe as it should appear...

Best regards
Jean Jacques

Ninja

janjak
Hi
Add this code in your template custom.css file to set a minimum iframe height

@media(min-width:468px){ iframe{border:none;min-height:300px}}

You can increase the value of 300px to a bigger value if you want to increase the height.

Regards

janjak

Thank you !
I think you are on the right way but the iframe is displaying less wide than it should be, even with higher values in the code you give me...

janjak

Ninja

janjak
Hi
You have this code in custom.css file at this time

@media (min-width: 600px){
iframe {
    border: none;
    min-height: 400px;

}}

Replace it with

@media (min-width: 600px){
iframe {
    border: none;
    min-height: 460px;
    width: 100%;
    max-width: 400px;
}}

It will look like this http://prntscr.com/nqvnqq

janjak

Thank you that's nice!
But I'm trying to have in the iframe just the same widget than on the original link :

Ninja

janjak Hi
Increase the min width value to get same like original link.

janjak

That's right :-)
I remove max-width: 400px; who can't work with min-width: 600px and because this also broke the virtual tour on home page....
Have you an idea how to display the entire widget without scroll bars on the right ?
When you enter a date and other things, the widget has to be higher..

Regards,
JJ

Ninja

janjak
If you want this to work only for this menu, you can add the menu item id in the code

 @media (min-width:600px){.itemid-234 iframe{border:none;min-height:480px;width:100%}}

This will work only for this menu item.

janjak

Thank you very much !
An idea how to display the entire widget without scroll bars on the right when the client enter the dates, number of persons and credit card details ?

Regards,
JJ

Ninja

janjak

Hi
You need to increase the min height value in same code.
Please note it will apply for previous iframe too.

janjak

Yes but this will create a big blank area under the iframe ;-(
Is there no way to have this "responsive", as images blocks ?

Ninja

janjak
No, the min height will not detect which iframe URL it will load.
This work like this.

Regards

janjak

Ok, you're right : it's better now :-)
Best regards,
Jean Jacques