为不同的媒体查询调整div元素的大小

Question

我正在尝试调整包含不同媒体查询的幻灯片显示的div元素，但我找不到合适的解决方案。

.html列在下面

@pyqtSlot

媒体查询的.css列在下面：

        <div class="content" id="cont">
            <div id="sbi_container" class="sbi_container">

                <div class="sbi_panel" data-bg="resources/img/backgroundcust.jpeg">
                    <a href="#" class="sbi_label" onclick="hideit()">x</a>
                </div>
                <div class="sbi_panel" data-bg="images/4.jpg">
                    <a href="#" class="sbi_label" onclick="hideit2()">x</a>
                </div>
                <div class="sbi_panel" data-bg="images/5.jpg">
                    <a href="#" class="sbi_label" onclick="hideit3()">xy</a>

                </div>
                <div class="sbi_panel" data-bg="images/6.jpg">
                    <a href="#" class="sbi_label" onclick="hideit4()">xxy</a>
                </div>

                <div class="sbi_panel" data-bg="images/6.jpg">
                    <a href="#" class="sbi_label" onclick="hideit5()">yy</a>
                </div>
                <div class="sbi_panel" data-bg="images/6.jpg">
                    <a href="#" class="sbi_label" onclick="hideit6()">yy</a>
                </div>
                <div class="sbi_panel" data-bg="images/6.jpg">
                    <a href="#" class="sbi_label" onclick="hideit7()">xxy</a>
                </div>
                <div class="sbi_panel" data-bg="images/6.jpg">
                    <a href="#" class="sbi_label" onclick="hideit8()">Foam</a>
                </div>
            </div>

问题是此解决方案只是调整整个幻灯片的大小，并没有显示所有幻灯片。

你能建议一个解决方案吗？