iFrame in the GlobalTemplate

[jffuchs]

Hello,

I use an IFRAME on the top of my website (for our partner banners)

I have added some code in the GlobalTemplate file after the     </head>

  <div align="center">
   <iframe src="https://www.volavoile.net/layout_volavoile.net/menu_top_volavoile.net.htm" name="header" frameborder="0" width="1200" height="85" align="center" scrolling="no" >
</IFRAME>
 </div>

This frame is not well compatible for "phone" and "tablet" (the iframe is to large)

I want to

Option-1 : use  another menu_top_volavoile.net.htm file with "phone" and "tablet"

or

Option2 : I want to disable it for "phone" and "tablet" ....

 

I need you support to complete the code in the GlobalTemplate file in order to use 2 type of iframe depending on

Frame 1 : desktop

Frame 2 : "phone" and "tablet" +

Thank you,

Frederic

 

[opentype]

You can apply CSS classes to show and hide content based on whether the screen size relates to desktop, tablet or phone: https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/

(Personally, I would rethink this entire implementation though. iFrames are not a good way to implement banners.)

 

[jffuchs]

Thank you, .... I will try with the guide / link ... Maybe I will need more support

You are right about the iframe ...but it works well and it's easy to put in place 🙂

Have a nice day

Edited February 7, 2022 by jffuchs

[jffuchs]

Hello,

I have edited the LAYOUT.CSS file with :

/* Gestion taille Ecran */
#ipsLayout_header {
	position: relative;
    margin: 0 auto;
    .ipsApp .ipsResponsive_showDesktop{ width: 1200px; }
    .ipsApp .ipsResponsive_showTablet{ width: 100%; }
    .ipsApp .ipsResponsive_showPhone{ width: 100%; }
    }

It works well with the phone .... but not with the desktop .... see the printscreen

Did I make a mistake ?

Thank your for your support,

Best regards

Frederic

 

Edited February 7, 2022 by jffuchs