0
긴 SCS 코드로 인해 처음에는 유감스럽게 생각합니다.이 코드는 내 바닥 글 디자인의 CSS 구조이며 기본 CSS 코드는 정상적으로 작동하지만 미디어 쿼리에 같은 클래스 이름을 사용할 때 나는 을 써야만한다 중요한 미디어 쿼리의 모든 CSS 속성 후에 중요한을 작성해야한다. 미디어 쿼리의 경우 대부분을 써야한다! 중요하지 않은 채 기본 스타일을 재정의해야한다! 미디어 쿼리 내부의 중요한 CSS 코드가 작동하지 않는다. 이! 중요한 키워드를 제거하기 위해 나를 도와 줄 사람이 하나가하는 SCS/CSS 코드를 구성하는 방법에 도움을 줄 수 제대로미디어 쿼리를 사용하여 기본 스타일을 재정의하는 방법
.footerWrapper {
display: flex;
flex-direction: column;
.topBlock {
max-width: 100%;
display: flex;
padding: 20px 30px;
flex-direction: row;
border: 1px solid $color-border;
background-color: $color-bg-footer;
flex-wrap: wrap;
.leftTop {
width: 40%;
.heading {
font-weight: bold;
font-size: 24px;
color: $color-body
}
.small {
font-size: 14px;
color: $color-body-light;
text-align: left;
}
}
.iconBlock {
display: flex;
flex-direction: row;
padding-left: 25px;
align-items: center;
width: 50%;
justify-content: space-between;
.iconBox {
display: flex;
flex-direction: row;
align-items: center;
}
.iconStyle {
border-radius: 50%;
border: 2px solid $color-border;
width: 45px;
height: 45px;
.innerIcon {
line-height: 44px;
display: flex;
font-size: 20px;
align-items: center;
flex-direction: column;
}
}
.iconText {
display: flex;
flex-direction: column;
margin-left: 18px;
.iconSmallText {
font-weight: 600;
font-size: 12px;
color: $color-body-light;
text-align: left;
text-transform: uppercase;
}
.iconLargeText {
font-weight: bold;
font-size: 21px;
color: $color-body;
text-align: left;
}
}
}
}
.secondBlock {
max-width: 100%;
background-color: $color-bg-primary;
display: flex;
flex-wrap: wrap;
padding: 42px 30px;
justify-content: space-around;
}
.thirdBlock {
display: flex;
flex-direction: row;
width: 80%;
margin: 0 auto;
justify-content: space-around;
padding: 20px 30px;
.subscribeBlock {
max-width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.social {
display: flex;
flex-direction: column;
.socialText {
font-size: 15px;
color: $color-body;
margin-bottom: 16px;
font-weight: 600;
text-transform: uppercase;
}
}
.socialAndApp {
display: flex;
flex-direction: row;
}
.logoText {
font-size: 15px;
color: $color-body;
margin-bottom: 16px;
font-weight: 600;
text-transform: uppercase;
}
}
.fourthBlock {
max-width: 100%;
background-color: $color-brand-primary;
padding: 20px 30px;
display: flex;
justify-content: space-between;
flex-direction: row;
.bottomLeft {
display: flex;
flex-direction: row;
.cards {
margin-left: 20px;
}
.reservedBlock {
display: flex;
}
.reservedText {
font-size: 13px;
}
}
.bottomRight {
width: 100%;
max-width: 500px;
text-transform: capitalize;
display: flex;
color: $color-body;
font-size: 13px;
justify-content: space-between;
}
}
.linksBlock {
display: flex;
justify-content: center;
}
.bottomPanel {
padding: 14px 29px 16px;
font-size: 13px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: $color-body;
}
.bottomBlock {
cursor: default;
text-align: center;
}
.block {
min-width: 137px;
padding-right: 72px;
}
.link {
display: block;
margin: 2px 0 0;
text-transform: capitalize;
font-size: 13px;
line-height: 2.38;
color: $color-body;
text-decoration: none;
}
.title {
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
line-height: 1.46;
color: $color-body;
cursor: default;
margin-bottom: 18px;
}
}
//for xs mobile screen
.footerWrapper {
@media #{$max-mobile}{
.leftTop {
width: 100% !important;
margin-bottom: 27px;
}
.iconLargeText {
font-size: 16px !important;
}
.heading {
font-size: 19px !important;
}
.topBlock {
flex-direction: column;
}
.iconBlock {
padding-left: 0 !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.cards {
margin-left: 0 !important;
}
.bottomLeft {
display: flex;
flex-direction: column !important;
align-items: center !important;
}
.bottomRight {
flex-wrap: wrap;
margin-top: 18px;
line-height: 23px;
justify-content: space-around !important;
}
.subscribeBlock {
max-width: 100% !important;
}
.social {
margin-top: 25px;
}
.socialText {
text-align: center;
font-size: 12px !important;
}
.appLogo {
margin-top: 18px;
}
.logoText {
font-size: 12px !important;
text-align: center !important;
}
}
}
//Screen for tablet view
.footerWrapper {
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.leftTop {
width: 100% !important;
margin-bottom: 27px;
display: flex;
flex-direction: column;
align-items: center;
}
.iconLargeText {
font-size: 17px !important;
}
.block {
min-width: 100px !important;
padding-right: 45px;
}
.heading {
font-size: 19px !important;
}
.iconBlock {
padding-left: 0 !important;
flex-direction: row;
width: auto !important;
justify-content: space-around !important;
}
.fourthBlock {
flex-direction: column;
align-items: center !important;
}
.cards {
margin-left: 0 !important;
}
.bottomLeft {
display: flex;
flex-direction: column !important;
align-items: center !important;
}
.subscribeBlock {
max-width: 100% !important;
padding-bottom: 25px !important;
}
.socialAndLogo {
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
}
}
}
@media only screen and (min-width: 769px) {
.socialAndLogo {
display: flex ;
flex-direction: row ;
}
}
//Screen for tablet view
.footerWrapper {
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.leftTop {
width: 100% !important;
margin-bottom: 27px;
display: flex;
flex-direction: column;
align-items: center;
}
.iconLargeText {
font-size: 17px !important;
}
.block {
min-width: 100px !important;
padding-right: 45px;
}
.title {
font-size: 14px;
}
.heading {
font-size: 19px !important;
}
.topBlock {
flex-direction: column;
}
.iconBlock {
padding-left: 0 !important;
flex-direction: row;
width: auto !important;
justify-content: space-around !important;
}
.iconBox {
margin-bottom: 16px;
}
.fourthBlock {
flex-direction: column;
align-items: center !important;
}
.reservedBlock {
flex-direction: column;
.reservedText {
text-align: center;
padding-bottom: 11px;
}
}
.cards {
margin-left: 0 !important;
}
.bottomLeft {
display: flex;
flex-direction: column !important;
align-items: center !important;
}
.bottomRight {
flex-wrap: wrap;
margin-top: 18px;
line-height: 23px;
justify-content: space-around !important;
}
.reservedText {
margin-top: 20px;
}
.thirdBlock {
display: flex;
flex-direction: column;
}
.subscribeBlock {
max-width: 100% !important;
padding-bottom: 25px !important;
}
.socialAndLogo {
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
}
.block:nth-child(4) {
display: none;
}
.block:nth-child(5) {
display: none;
}
}
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
.bottomRight {
margin-right: 114px;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
.block:nth-child(4) {
display: none;
}
.block:nth-child(5) {
display: none;
}
}
@media only screen and (min-width: 1500px) {
.topBlock, .fourthBlock {
padding: 20px 190px !important;
}
}
정상적인 원인은 컴파일 된 미디어 쿼리 규칙이 이전 규칙보다 낮은 _specificity_입니다. 진정한 이유를 실제로 찾으려면 발생하는 문제를 재현하는 최소한의 작업 코드 스 니펫이 필요합니다. CSS만으로는 충분하지 않습니다. 그리고 코드를 제대로 들여 쓰기가 쉽도록 들여 씁니다. 문제가있을 때이를 쉽게 발견 할 수 있습니다. – LGSon
안녕하세요 @LGSon, html 코드가 반응 중입니다. reactjs 코드를 편집해야합니다 – wali
일반적인 답변을 이미 게시했습니다. 문제가 해결되면 – LGSon