Jump to content

PDF embed Height issue on mobile view

Recommended Posts

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. 🙂

Screenshot 2023-10-02 mob.png

Link to comment
  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...

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>

 

squarespace 1.jpg

Link to comment
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>

 

squarespace 1.jpg

Can you share link to this page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.