在響應式屏幕上隱藏div

我想用CSS隱藏facebook像框。我用這個：在響應式屏幕上隱藏div

.fb-like-iframe.fb_iframe_widget { 
    display: none !important; 
}

但這種工作，但僅適用於大顯示器和它仍然顯示在移動設備上。

當我在桌面上調整網頁大小並使其寬度變小時，會出現響應式更改和fb-like-iframe的臨界點。

我試圖用這個隱藏它的移動很好，但沒有成功做到遠：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .fb-like-iframe.fb_iframe_widget { 
     display: none !important; 
    } 
}

來源

2017-05-08 Lucian Barligea

我們可以看到這是原位，即發佈一個URL代碼是請，所以我們可以檢查它。我的直覺是將這個小部件放入一個封閉的div中，然後根據視口寬度媒體查詢顯示或隱藏該div。 –

這裏是鏈接：http://www.quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=true只需點擊開始並選擇任何答案。之後，等待幾秒鐘模式彈出。 –

代替min-device-width和max-device-width可以使用min-width和max-width。或者更好的效果，你可以只用max-width ..

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen (max-width : 480px) { 
    .fb-like-iframe.fb_iframe_widget { 
    display: none !important; 
    } 
}

來源

2017-05-08 06:02:55

@Abhishek Pandey，是的，我同意你的看法，但是OP可以根據他的要求定義最大寬度。我只是告訴他們他做錯了什麼。 –

我也試過，它不起作用。這裏是鏈接：quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=t rue只需點擊開始並選擇任何答案。之後，等待幾秒鐘模式彈出。 –

你目前正在使用此：

@media screen and (min-width: 768px) 
.fb-like-iframe.fb_iframe_widget { 
    display: none !important; 
}

只是改變(min-width: 768px)到(max-width: 768px) 讓我知道，如果這是你所需要的

來源

2017-05-08 06:32:44

我也試過，沒有運氣。你可以在這裏看到：http://www.quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=true –

你能截圖什麼是你想隱藏的確切東西嗎？ –

這裏是截圖http://i.imgur.com/IoWiSBT.png（手機）http://i.imgur.com/EirOWHe.png（桌面）我也做了一個視頻，顯示響應臨界點桌面移動https://www.youtube.com/watch?v=NpUONG6MGfE –

style.css與縮小版本之間存在衝突，導致它不能僅在移動設備上工作。

.fb-like-iframe.fb_iframe_widget { 
 
    display: none !important; 
 
}

，我已經修復它，現在的原代碼（以上）的作品桌面和移動上。謝謝

來源

2017-05-08 11:46:57

在響應式屏幕上隱藏div

回答

相關問題