반응 형 화면에서 div 숨기기

CSS가있는 상자와 같은 페이스 북을 숨기고 싶습니다. 나는이 사용 :반응 형 화면에서 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를 사용할 수 있습니다. 당신이 사용하는

현재

/* 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 시작을 클릭하고 대답을 선택하십시오. 그 후 모달이 나타나기까지 몇 초간 기다리십시오. –

또는 더 나은 결과 당신은 .. 단지 max-width 사용할 수 있습니다 단지 (max-width: 768px)에 (min-width: 768px)을 변경

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

을이 당신이 필요로하는 경우 이 알려

출처

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

답변

관련 문제