jffuchs Posted February 7, 2022 Share Posted February 7, 2022 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 Link to comment Share on other sites More sharing options...
opentype Posted February 7, 2022 Share Posted February 7, 2022 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.) Link to comment Share on other sites More sharing options...
jffuchs Posted February 7, 2022 Author Share Posted February 7, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
jffuchs Posted February 7, 2022 Author Share Posted February 7, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts