PDF embed Height issue on mobile view

Hello Community! 

I have dug around to find a solution that will properly fit the embedded Google Drive PDF in both desktop and mobile but I am having troubles. I can only make it fit perfect on desktop. On mobile there is an unnecessary amount of black space after the pdf and it impedes on the page. I'm assuming it's because I put "4200" for the height, but this number is the only way it will show normal on desktop. How do I make it so it fits nicely on both desktop and mobile? 

This is the code:

<iframe src="https://drive.google.com/file/d/1z1C4DUVt1YOedv9vWBjV4B_M0JDIBcom/preview" width="100%" height="4200"></iframe>

Height is the main issue. 100% does not work, 100vh or others do not work either.

I'm hoping someone can help! Thanks for your time. 🙂

Use this new iframe code

<iframe src="https://drive.google.com/file/d/1z1C4DUVt1YOedv9vWBjV4B_M0JDIBcom/preview" width="100%" height="4200px"></iframe>
<style>
  @media screen and (max-width:767px) {
    iframe[src*="google.com"] {
    	height: 900px !important;
    }
  }
</style>

with 900px is height on mobile

Hi @Tuanphan,

is there anyway to:

- autosize the iframe to the page orientation so there is no big black background around it? I'm using landscape pdf

- change the background to white and not have as black?

Thanks for your help

<iframe src="https://drive.google.com/file/d/1J5_hGmJEtRvkR0G-eb_7bayLez-AlV1h/preview" width="100%" height="900px"></iframe>
<style>
  @media screen and (max-width:767px) {
    iframe[src*="google.com"] {
    	height: 900px !important;
    }
  }
</style>

On 4/10/2024 at 4:38 PM, patrick1000 said:

Hi @Tuanphan,

is there anyway to:

- autosize the iframe to the page orientation so there is no big black background around it? I'm using landscape pdf

- change the background to white and not have as black?

Thanks for your help

<iframe src="https://drive.google.com/file/d/1J5_hGmJEtRvkR0G-eb_7bayLez-AlV1h/preview" width="100%" height="900px"></iframe>
<style>
  @media screen and (max-width:767px) {
    iframe[src*="google.com"] {
    	height: 900px !important;
    }
  }
</style>

 

Can you share link to this page?