나는 내 사이트를 반응 형으로 만들기 위해 노력하고 있습니다. 지금은 텍스트가 반응하지만 내 이미지는 태블릿보기에서 부분적으로 잘려나 가고 모바일에서는 내 텍스트 설명 상자에서 사라집니다. 어떤 도움이라도 좋을 것입니다. 다음은 내 코드와 내 사이트가 태블릿보기에 표시되는 모습입니다. 이미지 태블릿보기에서 자르기/사라짐
CSS
.work {
-webkit-padding-start: 0;
list-style-type: none !important;
padding: 4vw;
margin: 0 auto;
background-color: #f7f7f7;
}
.UMMA {
background-image: url(../img/UMMA.jpg);
}
@media only screen and (max-width: 720px) {
.UMMA {
background-position-x: 30%;
}
}
<li class="section UMMA”>
<div class="description">
<h2>UMMA</h2>
<p>Making the on-site museum experience more engaging for visitors.</p>
<a class="button" target="_blank" href=“UMMA.html”>View Project</a>
</div>
</li>
background-size:100%;
는'Z-index'으로 시도 추가해야합니다. –