all first sorry for long scss code, this is the CSS structure of my footer design, the default CSS code is working fine, but when I use the same class name in media queries than I have to write !important after every CSS property in media queries, in most of the cases in media query I have to write !important to override the default style, without !important CSS code inside media queries is not working, can anyone help me to get rid of this !important keyword or can anyone one assist to how to structure scss/css code properly
.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;
}
}
A general answer is specificity
, where the rules in the media query has a lower specificity than the original rule.
I.e, in this rule it has only one class, .topblock {...}
@media only screen and (min-width: 1500px) {
.topBlock, .fourthBlock {
padding: 20px 190px !important;
}
}
but its original rule appears to have 2 classes .footerWrapper .topBlock {...}
So for that to work in the media query, do like this
@media only screen and (min-width: 1500px) {
.footerWrapper .topBlock, .footerWrapper .fourthBlock {
padding: 20px 190px;
}
}