버튼이 반응하지 않습니다. 화면 크기가 변경 될 때 업데이트되지 않습니다.

Question

화면 크기가 변경 될 때 버튼이 업데이트 될 것으로 예상됩니다. 두 개의 버튼은 img에 있고 링크로 감 쌉니다. 어떤 도움을 주셔서 감사합니다. 템플릿은 다음과 같습니다 :

<div class="img"> 
     <img src="topimage.jpg" 
     <a href="#" ><button class="left-button">left</button></a> 
     <a href="#" ><button class="right-button">right</button></a> 
    </div> 

CSS :

.left-button { 
    display: block; 
    position: absolute; 
    left: 8%; 
    top: 19%; 
    font-size: 115%; 
    font-weight: bold; 
    padding: 0.8em; 
} 
.right-button { 
    display: block; 
    position: absolute; 
    left: 37%; 
    top: 19%; 
    font-size: 115%; 
    font-weight: bold; 
    padding: 0.8em; 
} 
.img { 
    width: 100%; 
    display:inline-block; 
    position:relative; 
    } 

Answer 1

귀하의 버튼을 img에 반응하지 않습니다. 버튼에 너비를 설정해야합니다. 마찬가지로 :

.left-button { 
    width:30%; 
    //your css 
} 

Working fiddle