使用@media 规则调整 iframe 的大小

Question

我正在尝试使用媒体查询调整 cbox iframe 的大小，以便在较小的屏幕上使用时它会调整大小。它似乎不起作用，因此我们将不胜感激。谢谢！

HTML:

<div id="n-cbox"><iframe id="iframe-cbox" src="URL removed on purpose" height="404" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe></div>

CSS:

#n-cbox {
    position: fixed;
    display: none;
    z-index: 999;
    top: 218px;
    left: auto;
    right: 50px;
    bottom: auto;
    width: nullpx;
    padding: 0px;
}
        

#iframe-cbox {
    width:100%;
}

@media only screen and (max-width:800px) {

    #iframe-cbox {
        width:50%;
    }

Answer 1

@media only screen and (max-width:800px) {

    #iframe-cbox {
        width:50% !important;
    }
}