在响应式屏幕上隐藏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;
}
}
代替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;
}
}
@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)
让我知道,如果这是你所需要的
我也试过,没有运气。你可以在这里看到: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;
}
,我已经修复它,现在的原代码(以上)的作品桌面和移动上。谢谢
我们可以看到这是原位,即发布一个URL代码是请,所以我们可以检查它。我的直觉是将这个小部件放入一个封闭的div中,然后根据视口宽度媒体查询显示或隐藏该div。 –
这里是链接:http://www.quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=true只需点击开始并选择任何答案。之后,等待几秒钟模式弹出。 –