• GoDaddy Community
  • Websites + Marketing | Website Builders
  • Websites + Marketing | Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution

    Changing Dimensions of Embeded HTML Plugin Window

    Hi,

     

    I need to post this full page plug-in onto one of our web pages.  I originally just cut and paste the HTML code into the body as directed and it worked, but it has a scroll window and will not auto-adjust to full screen.  I even set the dimension to a larger size, but the plugin stays the same.  

     

    I did try to manually insert height and width code, but it did not change the size of the plug in.  Any advice here would be greatly appreciated.  Here is the code I'm using, and a screen shot of what it looks like.

     

    Thanks,

    Irina

     

    <iframe src="https://stellar.mlsmatrix.com/Matrix/public/IDX.aspx?idx=5f145462" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe>

     

    This is how it looks like

    Screen Shot 2020-04-23 at 2.44.45 PM.png

    This is how it suppose to look like:

    Screen Shot 2020-04-23 at 2.45.02 PM.png

    2 ACCEPTED SOLUTIONS
    Super User III

    <iframe src="https://stellar.mlsmatrix.com/Matrix/public/IDX.aspx?idx=5f145462" width="100%" height="1200px" frameborder="0" marginwidth="0" marginheight="0"></iframe>

    View solution in original post

    The iframe element is not responsive by default but there are several ways to make it act that way.

     

    You can use your favorite search for "responsive iframe" to find a few different tricks.  Though most would be for maintaining the same aspect ratio.  For this task I think you'll want to change the aspect ratio based on screen size, to do that you can use media queries.

     

    <style>
    
    	iframe.chatbot {
    		border: none;
    		display: block;
    		margin: 0 auto;
    		width: 100%;
    		height: 100%;
    	}
    
    	@media only screen and (max-width: 768px) {
    		iframe.chatbot { height: 150vw; }
    	}
    
    	@media only screen and (min-width: 768px) {
    		iframe.chatbot { height: 75vw; }
    
    	}
    
    	@media only screen and (min-width: 992px) {
    		iframe.chatbot { height: 50vw; }
    	} 
    
    </style>
    
    <iframe src="https://fxo.io/m/8n7p96pr" class="chatbot"></iframe> 

    View solution in original post

    8 REPLIES 8
    Super User III

    <iframe src="https://stellar.mlsmatrix.com/Matrix/public/IDX.aspx?idx=5f145462" width="100%" height="1200px" frameborder="0" marginwidth="0" marginheight="0"></iframe>

    View solution in original post

    Thank you.

    @Irina123    No problem, welcome to the Community!

    @Nate 

     

    Nate, I've been really struggling with this issue too.

     

    The problem with your proposed solution is that the iframe is now fixed at 1200px or what every you set as the value. However I need the iframe size to be responsive i.e. to the right size of 100% and not fixed.

     

    If I check my code is an HTML checker it is always responsive to 100% yet in GoDaddies HTML section this doesn't work correctly and the iframe defaults to about 150px. The Forced Height feature only allows the px to be fixed.

     

    This has been a real pain for me.

     

    Any suggestions?

     

    Thanks for your orginal post @Irina123 

    @poweye    What is the code you are working with?

    Nate
    This is the code which fixes the height to display on a mobile. Using 100% only displays about 150px.

    Thanks for your help


    <iframe src="https://fxo.io/m/8n7p96pr" width="100%" height="400px" frameborder="0" marginwidth="0" </iframe>

    Ps
    Src is completely responsive even if rotated.

    The iframe element is not responsive by default but there are several ways to make it act that way.

     

    You can use your favorite search for "responsive iframe" to find a few different tricks.  Though most would be for maintaining the same aspect ratio.  For this task I think you'll want to change the aspect ratio based on screen size, to do that you can use media queries.

     

    <style>
    
    	iframe.chatbot {
    		border: none;
    		display: block;
    		margin: 0 auto;
    		width: 100%;
    		height: 100%;
    	}
    
    	@media only screen and (max-width: 768px) {
    		iframe.chatbot { height: 150vw; }
    	}
    
    	@media only screen and (min-width: 768px) {
    		iframe.chatbot { height: 75vw; }
    
    	}
    
    	@media only screen and (min-width: 992px) {
    		iframe.chatbot { height: 50vw; }
    	} 
    
    </style>
    
    <iframe src="https://fxo.io/m/8n7p96pr" class="chatbot"></iframe> 

    View solution in original post