在手機上隱藏2個李的內容

我試圖隱藏前兩個列表項，當我的網站下降到手機。我在每個li上添加了一個類，我想要隱藏，然後嘗試媒體查詢並在CSS中不顯示任何內容。但它似乎沒有工作。這裏是我的代碼在手機上隱藏2個李的內容

<ul class="home-btns btns-3 center"> 
    <li class="hide-mobile"> 
     <a href="/why-attend/"><span class="welcome-robot center"><img src="<?php bloginfo('template_directory'); ?>/assets/images/robot-icon-welcome.png" alt="Robot Icon" /></span> <span class="btn-text">Why Attend?</span></a> 
    </li> 
    <li class="hide-mobile"> 
     <a href="/agenda/"><span class="fa fa-group center"></span> <span class="btn-text">Agenda</span></a> 
    </li> 
    <li> 
     <a href="/#pass-section"><span class="fa fa-ticket center"></span> <span class="btn-text">Register Now</span></a> 
    </li> 
</ul> 

@media screen and (max-width: 667px) { 
    .hide-mobile { 
     display:none; 
    } 
}

來源

2015-11-05 pocockn

假設你已經配置的中繼檢視，以正確的順序mediaqueries和CSS出這個HTML塊的，也許你的問題是，你的設備比667大像素寬度。 –

某些移動設備的屏幕寬度超過667像素 – dsh

我懷疑您遇到特定問題。你有沒有其他的CSS可以應用於這些li？你可以使用鉻檢查器來調整視口寬度到這個斷點，看看什麼樣的css被應用到li的？ – quoo

很難說如果沒有看到你的更廣泛的代碼來檢查它的一切順序（視口元標記等），它可能是什麼。

而是前2裏的，你爲什麼不嘗試使用第n個孩子選擇一個更編程方法分配的定製類：

@media (max-width: 667px) { 
    ul.home-btns li:nth-child(1), ul.home-btns li:nth-child(2) { 
    display: none 
    } 
}

來源

2015-11-05 15:34:10

這是一個很好的觀點，但是...這不是問題... –

是的，但是我不能評論這個問題而沒有看到所有的難題。以爲我會在過渡期間誠意提供小費:-) –

完美工作 – pocockn

您的代碼工作正常，看http://codepen.io/nicholasabrams/pen/YyOerE。調整預覽窗口，看你的LIS消失

 <ul class="home-btns btns-3 center"> 
       <li class="hide-mobile"> 
        <a href="/why-attend/"><span class="welcome-robot center"><img src="<?php bloginfo('template_directory'); ?>/assets/images/robot-icon-welcome.png" alt="Robot Icon" /></span> <span class="btn-text">Why Attend?</span></a> 
       </li> 
       <li class="hide-mobile"> 
        <a href="/agenda/"><span class="fa fa-group center"></span> <span class="btn-text">Agenda</span></a> 
       </li> 
       <li> 
        <a href="/#pass-section"><span class="fa fa-ticket center"></span> <span class="btn-text">Register Now</span></a> 
       </li> 
      </ul> 

@media screen and (max-width: 667px) { 
    .hide-mobile { 
    display:none; 
    } 
}

來源

2015-11-05 15:36:51

在手機上隱藏2個李的內容

回答

相關問題