如何使用媒體查詢制作響應式頁腳

Question

我的頁腳有5個框：一個用於徽標，關於，服務，公司和聯系方式。 以下是html代碼。

<footer class="mainfooter">
    <div class="footerlogo">
        <i class="fa fa-fax fa-5x" aria-hidden="true"></i>
    </div>
    <div class="aboutbox">    
        <strong><p>ABOUT</p></strong>
        <p style="color:#ffffe6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, dicta, nisi id ullam debitis, obcaecati modi magni culpa quasi blanditiis similique !</p>
    </div>
    <div class="services"> 
        <ul>
            <li><strong><p>SERVICES</p></strong></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Financial</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Medical</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Insurance</a></li>
        </ul>
    </div> 
    <div class="company">
        <ul> 
            <li><strong><p>COMPANY</p></strong></li>     
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Home</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> About</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Contact</a></li>
        </ul>
    </div>
    <div class="contact">          
        <ul>
            <li><strong><p>CONTACT</p></strong></li>                   
            <li style="color:#ffffe6"><i class="fa fa-phone" aria-hidden="true"></i> +27 000 0004l</li>
            <li style="color:#ffffe6"><i class="fa fa-envelope-o" aria-hidden="true"></i> info@nevex.co.za</li>
            <li style="color:#ffffe6"><i class="fa fa-map-marker" aria-hidden="true"></i> 1 Street. Cape Town. 8000</li>
        </ul>
    </div>  
    <div class="clearfix"></div>         
</footer>

我使用媒體查詢來嘗試您在下面看到的嘗試，但是它不起作用

@media(max-width: 600px){
    .footerlogo, .about, .services, .contact, .company{
        display:block;
        color:black; 
        padding:0px;
        margin: 0px;
    } 
}

在小型設備中，如何使盒子彼此疊放？

Answer 1

您的代碼幾乎沒有問題： about的類名錯誤。 在CSS中應該是aboutbox 。 將您的媒體查詢定義更改為此@media only screen and (min-width: 600px)

這些應該可以解決您的問題。 為了簡單起見，我將div的寬度減小到50％。 您仍然可以保持原樣。

要獲得更多幫助，請查看以下小提琴https://jsfiddle.net/aalok/wjb3prmf/

Answer 2

我測試了您的代碼，它工作正常。 但是可以添加您的“關於”課程名稱。 在html中，您使用class="aboutbox" ；在CSS中，您使用了class="about" 。 我認為問題出在其他地方，您發布的代碼對我來說很好。

Answer 3

在屬性后面添加!important可能會完成此工作。 像這樣;

@media(max-width: 600px){
    .footerlogo, .about, .services, .contact, .company{
        display:block !important;
        color:black !important; 
        padding:0px !important;
        margin: 0px !important;
    } 
}