시간 태그는 화면 크기에 따라 반응합니다.

시간 태그를 사용했습니다. 나는 hr 태그에 30 % 너비를 준다. 내 화면 확대, 시간 태그의 너비가 동일하게 유지됩니다. 그리고 내가 작은 내 화면 너비가 동일하게 남아 있습니다.시간 태그는 화면 크기에 따라 반응합니다.

하지만 페이지 크기에 따라 응답하는 너비가 필요합니다. 내가 어떻게 할 수 있니? 내가 확대 할 때 시간 너비 태그의 너비도 작게 설정합니다. 2 이미지가 첨부되었습니다. 첫 번째는 화면 크기가 100 %이고, 두 번째는 화면 크기 50 %에게 임 내 HTML은 다음과 같습니다

 `<div class="home-page-image"> 
     <img src={{homePageImage}}/> 
     <header> 
     <h3>Refer & Earn</h3> 
     <hr width="31%"> 
     <p>Introduce a friend and get rewarded</p> 
     </header> 
     </div>`

와하는 SCS는

home-page-image { 
    position: relative; 
    text-align: center; 
    img { 
    height: 100%; 
    width: 100%; 
    filter: opacity(50%); 
    } 
    header { 
    position: absolute; 
    top: 25%; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: 0 auto; 
    text-align: center; 
    h3 { 
     font-size: 36px; 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 600; 
     text-align: center; 
     margin-bottom: -8px; 
    } 
    hr { 
     border-style: inset; 
     margin-top: 19px; 
     margin-bottom: 11px; 
     width: 31%; 
    } 
    p { 
     font-size: 18px; 
     font-family: 'Open Sans', sans-serif; 
     color: #5D5C5D; 
     font-style: normal; 
    } 
    } 
}`