반응 형 웹 디자인 - 올바른 미디어 쿼리 추가

나는 워드 프레스로 웹 사이트를 개발했으며 디자인은 데스크톱과 태블릿에서 잘되지만 휴대 전화의 시각화가되면 좋은 디자인을 세우는 데 문제가 있습니다. 미디어 쿼리를 추가하려고하는데 원하는대로 요소를 제어 할 수 없습니다. 구체적으로 (Iphone5로 테스트 중입니다.) 탐색 막대가 세로보기에서 전체 화면을 덮지 않고, 이미지가 중앙에 있지 않으며 텍스트의 여백이 잘못되었습니다. 다음은 HTML 예제입니다. 홈페이지 : https://www.albertonesso.it 반응 형 웹 디자인 - 올바른 미디어 쿼리 추가

당신이이 문제를 해결 좀 도와 주 시겠어요 : 여기에 웹 사이트 주소

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=content-width, initial-scale=1.0"> 
<style> 
    #logo { 
    display: none; 
    } 

    div img { 
    display: inline; 
    } 

    div footer-area { 
    display: none; 
    } 

@media only screen and (max-width: 320px) { 
    img { 
     float: center; 
    } 

    div p { 
    margin: 0; 
    padding: 15px; 
    width: 100%; 
    } 
} 
</style> 

<img style="margin: -76px auto -55px auto; max-width: 450px;" src="http://localhost/wp/wp-content/uploads/2017/09/logo.png" alt="" width="1800" height="903" class="aligncenter size-full wp-image-461" /> 
</head> 
<body> 
<div>[smartslider3 slider=4]</div> 
<p style=" margin:70px 160px 0 160px;"><strong>Dottore Commercialista e Revisore Legale con sede a Verona</strong>, Alberto Nesso offre ai propri clienti una vasta gamma di prestazioni professionali di livello qualitativamente elevato entro un prezzo medio di mercato. L'attività di consulenza ordinaria contabile e fiscale, integrata all'occorrenza da servizi di assistenza amministrativa e aziendale-societaria, si rivolge ad imprese individuali, società di persone e capitali, enti no profit. Prestando attenzione alle esigenze di ciascun cliente, vengono fornite le informazioni specifiche, per massimizzare i risultati e le risoluzioni dei problemi, nella massima trasparenza e attraverso procedure giuridiche e fiscali coerenti con la strategia aziendale.</p> 
<div style="margin: 30px 50px; " align="center"><a href="http://www.albertonesso.it/profilo/" target="_blank"><img style="padding-right: 10px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-profilo2.png" /></a><a href="http://www.albertonesso.it/competenze/" target="_blank"><img style="padding-right: 5px; padding-left: 5px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-competenze2.png" /></a><a href="http://www.albertonesso.it/contatti/"target="_blank"><img style="padding-left: 10px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-contatti2.png" /></a></div> 
</body> 
</html>

? 미리 감사드립니다.

출처

2017-11-06 Guy Debord

크롬에서 홈페이지의 문제는 공유 표시 줄에서 탐색이 사라지는 것입니다. 나를 위해, 브라우저에서이 코드를 수정하십시오에서 볼 때 텍스트의 지나치게 좁은 열을 생성하도록

@media (max-width: 960px) { 
    .site-navigation-inner { 
     margin-top: 40px; 
    } 
}

당신은 또한 몇 가지 자바 스크립트 콘텐츠 텍스트에 여백을 설정하는 불행한 영향을 전화.

가능한 경우 자바 스크립트를 제거하고 CSS에서 여백을 설정하는 것이 좋습니다. 당신이 JS를 제거하는 것이 가능하지 않은 경우,이 같은 그것을 무시할 수 :

@media (max-width: 768px) { 
    .entry-content p { 
     margin: 0 40px !important; 
    } 
}

이미지를 들어, 당신은 추가 할 수 있습니다,

img.size-full { 
     width: 100%; 
    }

또는이 효과 다른 경우 바람직하지 못한 방식으로 이미지 :

img.wp-image-461 { 
     width: 100%; 
    }

은 현재 로고 이미지 만 대상으로합니다.

출처

2017-11-06 16:01:21 vlasits

힌트를 보내 주셔서 감사합니다. 이 탐색 막대 문제는 나를 위해 고정되어 있습니다. 텍스트 및 이미지에 대한 제안 사항은 무엇입니까? –

물론 ... 내가 추가 한 마진 수정을 제외하고는 다른 문제는 실제로 볼 수 없습니다. 어떻게 이미지를 다르게할까요? 또한 첫 번째 미디어 쿼리의 너비를 변경했습니다. – vlasits

멋진 코드에 감사드립니다. 제대로 표시되지 않는 로고 이미지가 있습니다. 화면이 수직이고 590px보다 작 으면 오른쪽의 화면을 넘습니다 ... 휴대 전화에서 볼 수 있습니까? –

반응 형 웹 디자인 - 올바른 미디어 쿼리 추가

답변

관련 문제