Схаваць DIV на мабільных прыладах, з дапамогай CSS

Я хачу, каб схаваць DIV, які змяшчае likebox віджэт facebook з мабільных прылад. Я паспрабаваў гэта, але ён не працуе.

Код дзіў:

<div id="facebook" class="fb-like-box mobile-hide" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>

Код CSS:

@media screen and (min-width: 0px) and (max-width: 720px) {
  #facebook { display: none; }
  .mobile-hide{ display: none; }
}

Што я раблю няправільна? Яна не працуе, выкарыстоўваючы ідэнтыфікатар або спасылку на клас.

3
што такі дазвол на шырыню прылады, яна можа быць больш 720, то
дададзена аўтар Patrick Evans, крыніца
Я нават паспрабаваў 960. я не думае, што гэта праблема.
дададзена аўтар Christos Baziotis, крыніца
Няма няма нічога іншага ...
дададзена аўтар Christos Baziotis, крыніца
Ці ёсць у вас якія-небудзь іншыя правілы CSS для гэтага элемента?
дададзена аўтар Adrift, крыніца
Я проста паставіць свой код у jsfiddle і працуе выдатна спасылка . Давайце ліквідаваць некаторыя, каб убачыць, калі гэтае пытанне з медыя-запыт не выклікаецца належным чынам або калі існуе праблема з ідэнтыфікатарам/класаў. Вы спрабавалі абвясціць іншыя правілы CSS пад СМІ, каб убачыць, калі ён працуе як задумана? Усталюйце адзін з вашага DIVS колеру фону, каб змяніць, калі шырыня дасягае 720px. Калі фон дзівы мяняецца, то мы ведаем, што гэта нешта з ідэнтыфікатарам/клас выклікаецца на. Калі фон не зменіцца, то мы ведаем, што запыт СМІ не выконваюцца.
дададзена аўтар Matt, крыніца
яна працуе на маім канцы. у вас ёсць правіла для .fb-тыпу скрынкі ніжэй, які вызначае новы дысплей? jsfiddle.net/H4vzE
дададзена аўтар skzryzg, крыніца
Вы можаце зрабіць jsfiddle з вашым ўсяго CSS, HTML і любыя JS?
дададзена аўтар skzryzg, крыніца

9 адказы

Пераканайцеся, што ваша старонка вызначае відавы экран мета-тэг.

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Для атрымання дадатковай інфармацыі па гэтым тэгу Прастола: Разуменне Viewport Meta Tag ,

6
дададзена
Гэта мой відавы экран мета-тэг. <meta NAME = "акно прагляд» змест = «пачатковая шкала = 1,0, максімальны маштаб = 1.0, карыстальнік маштабуецца = няма, шырыня = шырыня прылады»>
дададзена аўтар Christos Baziotis, крыніца

Па нейкай прычыне (невядомай мне) гэта працавала:

<div  class="mobile-hide">
<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>
5
дададзена

Паспрабуйце гэта працуе для мяне.

Прыклад 1:

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: block !important; }
}

Прыклад 2:

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: none !important; }
}

<�Моцны> апісанне спасылка

3
дададзена

Я асабіста думаю, што ваш параметр «дысплей» няправільны адзін, паспрабуйце выкарыстоўваць замест бачнасці. Я праверыў яго і ён працаваў на мяне.

Гэта адзін павінен працаваць для вас:

@media only screen and (min-device-width: 0px) and (max-device-width: 720px) {div#facebook {visibility:hidden;}}

Я думаю, што вы нават можаце забыць аб выкарыстанні класа.

1
дададзена

Паспрабуйце гэта.

 .mobile-hide{ visibility: hidden; }

Рэдагаванне: прабачце, азначала паставіць бачнасць.

0
дададзена
Я проста паспрабаваў яго. Не працуе :(
дададзена аўтар Christos Baziotis, крыніца

Чаму б не дадаць зло важна у свой Дысплей: None ?

0
дададзена

Добра ў мяне была гэтая праблема некаторы час таму, і па нейкай прычыне, ён працаваў толькі тады, калі я кладу правілы запыту сродкаў масавай інфармацыі ў канцы CSS. Не ведаю, чаму гэта, магчыма, памылка нейкая, але даць гэтаму спробу і дайце нам ведаць, калі гэта працуе.

0
дададзена

Калі вы працуеце на макеце сеткі вадкасці, DW ўжо створаны медиазапросы 3 для вас. Каб схаваць DIV на тэлефоне прымяняецца толькі:

#div{ display:none; } The trick is,that you have to add this line to tablet

<�Код> #div { Дысплей: блок;//або инлайн або што-небудзь, як вы хочаце, каб адлюстраваць яго }

Гэта працуе для мяне, спадзяюся, што гэта карысна.

0
дададзена

Проста выдаліце ​​«i (мін-прылады-шырыня: 0px)»

0
дададзена