Jump to content

Google form not responsive on mobile on my site

Recommended Posts

when you've embedded it, you've specified the width of the iframe to be 700 pixels. find the bit that says width="700" change that to width="100%" and you should be fine.

The code block does have a bit of padding on it which you probably don't want in your mobile version as this will probably upset the way the form fills the width, so you might also want to add this code to your code block (put it above the iframe bit and you'll be fine, if not add it to the custom css part of your site from the main Design menu without the style tags around it).

<style>
  @media screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1628417923165_5434 {
      padding:0;
    }
  }
</style>

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 1 year later...
On 8/8/2021 at 2:19 PM, iamdavehart said:

when you've embedded it, you've specified the width of the iframe to be 700 pixels. find the bit that says width="700" change that to width="100%" and you should be fine.

The code block does have a bit of padding on it which you probably don't want in your mobile version as this will probably upset the way the form fills the width, so you might also want to add this code to your code block (put it above the iframe bit and you'll be fine, if not add it to the custom css part of your site from the main Design menu without the style tags around it).

<style>
  @media screen and (max-width: 767px) {
    #block-yui_3_17_2_1_1628417923165_5434 {
      padding:0;
    }
  }
</style>

 

Thanks for your response to this. I followed your instructions and while changing the width to 100% does fix the mobile issues, the desktop version is now very narrow. In added your bit of style code, but it doesn't seem to make a difference. Any help is appreciated. 

Cheers,

Jenna
www.dwellbodywork.com

Screen Shot 2022-08-10 at 12.07.57 PM.png

Link to comment
16 hours ago, JennaHikes said:

Thanks for your response to this. I followed your instructions and while changing the width to 100% does fix the mobile issues, the desktop version is now very narrow. In added your bit of style code, but it doesn't seem to make a difference. Any help is appreciated. 

Cheers,

Jenna
www.dwellbodywork.com

Screen Shot 2022-08-10 at 12.07.57 PM.png

Which page are you referring to? I don't see it on homepage

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
  • 1 year later...

Hi, here's the solution. 

Delete default width and height in the iframe code. Assign a class like .responsive-iframe

Then, add the following CSS:

.responsive-iframe {

width:100vw; 

height:100vh;

}

100vw; That will take 100 porcent of the viewport width

100vh: same but height

 

Hope it helped :)

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.