CSS to Remove Header in iFrame

[suzannecox5a]

Hello, we are agents for Princess Yachts and I am trying to pull content from a page https://princessyachtcharter.com/yacht-charter/tor/ into a page on our site http://princessyachtsci.com/test-iframe/

Using Google Chrome Inspector I can hide the header by using
element.style {
background-color: rgba(25,53,65,0.6);
visibility: hidden;
}

I have then tried to add CSS to the page as follows but the header still shows in the iframe.
.class site-header absolute pin-t pin-x flex justify-between items-center text-white text-xs uppercase font-light py-30px lg:py-20px px-30px lg:px-50px {
visibility:hidden;
}

Please can you advise.
Thanks

[jade]

Hello Suzanne,

Adding CSS code to control the display of the element that is inside an iframe is tricky since you can’t just add custom CSS to do it. Also, since this is not something related to the theme but something that requires customization, this goes beyond the scope of our support.

What you can do is make the adjustment to the actual page that you are trying to embed so that you do not have to make any changes to the iframe.

Hope this helps.