Making I-Frame for a Google Form responsive for mobile

Site URL: https://www.armstronglloyd.co.uk/technology-marketing-salary-survey

I wonder if someone could help me out please?

I have a I-frame on the site for a survey using Google forms - https://www.armstronglloyd.co.uk/technology-marketing-salary-survey.

I can not for the life of me work out how to get this I-frame responsive so it sits properly on mobile.  I've tried a variety of different coding approaches and given up in frustration!

If anyone could point me in the right direction I would be so grateful!

Thanks,

Kate

16 hours ago, Kate_AL said:

Site URL: https://www.armstronglloyd.co.uk/technology-marketing-salary-survey

I wonder if someone could help me out please?

I have a I-frame on the site for a survey using Google forms - https://www.armstronglloyd.co.uk/technology-marketing-salary-survey.

I can not for the life of me work out how to get this I-frame responsive so it sits properly on mobile.  I've tried a variety of different coding approaches and given up in frustration!

If anyone could point me in the right direction I would be so grateful!

Thanks,

Kate

Add to Design > Custom CSS

/* Google form mobile */
@media screen and (max-width:767px) {
iframe[src*="google.com/forms"] {
    width: 100% !important;
    height: 800px;
}
}

@tuanphan - you are amazing, that worked perfectly. 

Thank you so much!

On 7/22/2021 at 6:13 PM, Kate_AL said:

@tuanphan - you are amazing, that worked perfectly. 

Thank you so much!

Do you want to fix these?

Site URL – https://www.armstronglloyd.co.uk/

1. (Desktop – Technology) Arrow icon is cut to the next line.

https://www.armstronglloyd.co.uk/technology-marketing-recruitment

2. (Mobile – Last marketing job) Buttons are skewed to the right.

https://www.armstronglloyd.co.uk/latest-marketing-jobs-1/account-based-marketing-specialist-munich-0421

3. (Tablet – Header) Menu is cut into 3 lines.

https://www.armstronglloyd.co.uk/

4. (Tablet – Recruitment) Text overlaps.

https://www.armstronglloyd.co.uk/marketing-recruitment-for-employers

5. (Tablet – Last marketing job) Text break.

https://www.armstronglloyd.co.uk/latest-marketing-jobs

6. (Tablet – Contact us) Increase map width?

https://www.armstronglloyd.co.uk/contact-us