[Hacktoberfest 2021] CSS로 반응형 디자인

hacktoberfest 2021에 대한 나의 세 번째 기여는 반응형 디자인을 수정하는 것이었습니다.
"responsive"라는 단어를 보았을 때 학교 2학기가 끝나고 한동안 css 작업을 하지 않았기 때문에 매우 흥미로워 보였습니다.
나는 몇 년 전의 옛 기억을 떠올릴 수 있는 문제를 선택했다.
https://github.com/mohitbalwani/Citi-site/issues/1

현재는 html과 css만으로 제작된 원페이지 웹사이트로, 창 크기를 줄였을 때 마지막 부분에 버그가 있었습니다.


업데이트는 css로 했습니다. 섹션 구분을 2단 디자인으로 먼저 업데이트 했습니다.
"row 4"분할 안에 열 디자인을 위해 두 개의 분할을 더 추가했습니다. 그리고 해당 열을 가로로 정렬하기 위해 너비를 백분율로 추가했습니다.

.column {
    float:left;
}
#col1 {
    width: 55%;
}

#col2 {
    margin:0%;
    width: 45%;
}

그 후 "@media"구조체를 사용하여 더 작은 창에 대한 특정 규칙을 추가하고 싶었습니다.

@media(max-width:700px){
    .row4 {
        height: 70vh;
    }
    .column h1{
        font-size: 2rem;
    }
    .form{
        font-size: 1.2rem;
    }
    .column button{
        width: 22vw;
        text-align: center;
    }
    .column {
        align-items: center;
    }
}

수정 후 더 작은 창과 함께 너비가 700px 미만으로 아래 이미지와 같이 보입니다.


또한 전화와 같은 더 작은 창을 위한 또 다른 미디어 구조를 추가했습니다.


이 문제는 설명이 거의 없었고 프로젝트에 Readme.md가 없었기 때문에 코드를 조금 더 이해할 수 있었습니다. 그러나 프로젝트 소유자는 매우 반응이 좋았고 문제를 해결하기 위해 진행할 수 있도록 저와 잘 소통했습니다.

아래에서 이 문제에 대한 풀 요청을 찾을 수 있습니다.
https://github.com/mohitbalwani/Citi-site/pull/4