responsive iframe to fill section

Hello,

I'm trying to get an iframe to fill a full section on a page for a client website.

At the moment it seems to be full width, but at a small height.

I've added the below to the CSS (which made it full width), but can't seem to get the height to change.

The iframe has a built in responsiveness so it changes to mobile version on small screens, so I'd like it to fill the section on both desktop and mobile.

Happy for it to have some white space around if needed (as is at the moment).

Page: https://www.sdaservices.com.au/eligibility-tool

CSS used currently:
 

#block-yui_3_17_2_1_1674441724084_27722 .sqs-block-content {
  height: 100% !important;
}

#block-yui_3_17_2_1_1674441724084_27722 iframe {
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
}

Thanks in advance 🙂

A

Update

I've managed to get to to be mostly full screen — but do now have a small white space on the left hand side I'd really like to get rid of.

Same URL: https://www.sdaservices.com.au/eligibility-tool

New CSS: (removed above)

.fe-63cf25643bca9c323109fe00 {
--sqs-site-gutter: -80px;}
  
iframe {width: 100vw; height: 100vh;}

Any advice would be greatly appreciated.

Thanks 🙂 

Hi,

Which white space are you referring to?