2014-08-29 2 views
0

반응 형 사이트 sandbox.mercomcorp.com을 만들고 있습니다. 현재 아이폰 4를 가로 질러 작업 중입니다. 나는 사회적인 아이콘이 여기에있는 곳에서 내려 가기 위해 전화 번호를 얻으려고 노력하고있다. 나는 나의 css 다. 나는 내가 왜 CSS를 꼭대기에 올릴 때 누군가 나를 도와 줄 수 있는지 이해하지 못한다. 아래는 해당 블록에 대한 내 CSS입니다CSS가 아이폰 4에서 작동하지 않습니다.

#block-66 
{ 
    font-weight:bold; 
    /* background:blue;*/ 
    position:absolute!important; 
    left:-215px!important; 
    top:245px!important; 

} 
+0

죄송합니다. 귀하의 CSS는 엉망입니다. 매 규칙마다 중요하지 않아야합니다! 최상위 규칙은 미디어 쿼리 @media 화면에서 -45px로 설정되었고 (최대 너비 : 480px) 및 (최소 너비 : 320px) – GifCo

+0

@GifCo 감사하지만 작동하지 않았습니다. 의견 외에 내 CSS에 무슨 문제가 있습니까? –

+0

-45px 대신 Top : 45px로 변경되었습니다. Chrome Dev 도구에서 iPhone을 에뮬레이션 할 뿐이므로 작동하지 않을 것이라고 말하지만 상위로 변경하면 200px로 매우 가깝게 만들 수 있습니다. 아래 화면에 답변을 게시하십시오. – GifCo

답변

1

, 당신의 규칙은 목록의 세 번째 및 두 개의 서로 다른 미디어 쿼리에서 두 개의 다른 규칙에 의해 오버라이드 (override)하면 '최고'위치입니다.

는 (I 콘솔의 스크린 샷을 게시하고 싶었지만 그럴 수 없어) 귀하의 경우에는

, 당신은 적용되는 주요 규칙 후 규칙을 정의해야합니다.

media="all" 
@media screen and (max-width: 480px) and (min-width: 320px) 
#block-66 {...} 

규칙은 코드 어딘가에, 그리고 규칙에 우선을 복용. 이것을 찾아서이 규칙 뒤에 규칙을 추가하십시오.

또한 가능한 경우! important를 사용하지 말고 정확한 주문을 사용하십시오.

호프가 도움이 되었으면 좋겠습니다.

0

미디어 쿼리 및 규칙의 스크린 샷을 참조하십시오. 전화 번호 이동을 변경하고 있습니다. 내가 볼 수 있듯이

enter image description here

관련 문제