提问人:Anosha Sohail 提问时间:11/17/2023 最后编辑:Anosha Sohail 更新时间:11/17/2023 访问量:18
媒体查询未对特定屏幕宽度应用样式 - 寻求帮助
Media Queries Not Applying Styles for Specific Screen Widths - Seeking Assistance
问:
@import "assets/variables/light.scss";
#join-copy {
.bg-white {
background-color: $white;
}
.join-us-new-heading {
color: $heading-color;
font-size: $fs_14xl;
}
.join-us-new-desc {
color: $heading-color;
font-size: $fs-base;
}
.join-us-new-header {
padding: 6rem;
height: 18.125rem;
background-image: url("/images/community-banner.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: "Satoshi";
display: flex;
align-items: center;
text-align: center;
.join-us-new-desc {
font-size: $fs_2xl;
}
.community-card-container {
/* max-height: 8.5625rem; */
gap: 4.5rem;
justify-content: center;
position: relative;
top: 35px;
left: -15px;
z-index: 1;
.ant-card {
max-width: 18.75rem;
/* background: #ff000054; */
border-radius: 0.75rem;
.ant-card-body {
padding: 1.6px !important;
}
}
.comunity-details {
padding: 0.5rem 0;
text-align: left;
color: $heading-color;
font-family: "IBM Plex Sans";
}
.community-btn {
border-radius: 0.25rem;
padding: 0.3rem 0.75rem;
height: auto;
color: $white;
font-size: $fs_sm;
margin-left: 2.5rem;
}
.is-gradiant {
background: linear-gradient(
180deg,
#9d41a5 0%,
#d74669 32.29%,
#e95950 70.83%,
#f8bd01 100%
) !important;
}
.join-community {
padding-right: 1.25rem;
}
.our-platform {
font-size: $fs_sm;
letter-spacing: 0.014rem;
}
.followers {
font-size: $fs_2xl;
}
}
}
.join-us-main-con {
/* margin-top: 9rem; */
/* .card-align {
align-items: flex-start;
flex-direction: row;
} */
.joinus-cards {
margin-top: 10rem;
.join-social-card {
background: #ffffff;
border-radius: 1.125rem;
border: 1px solid #eaeaea;
/* min-height: 20.0625rem; */
text-align: left;
max-width: 18.5rem;
font-family: "IBM Plex Sans";
.ant-card-body {
padding: 0;
}
.join-new-card {
padding: 1.9rem;
flex-direction: column;
gap: 1rem;
.join-img-circle {
height: 60px;
width: 60px;
/* text-align: center; */
border-radius: 50%;
background: #fafafa;
display: flex;
justify-content: center;
align-items: center;
}
}
.join-main-title {
color: #2b2b2b;
font-size: $fs_2xl;
}
.join-main-desc {
color: $heading-color;
font-size: $fs-base;
}
}
}
.community-section {
padding-left: 11.5rem;
font-family: "IBM Plex Sans";
.com-cards {
.ant-card-body {
padding: 0 !important;
}
}
.community-cards {
border-radius: 4.0625rem;
padding: 1.25rem;
border: 1px solid #eaeaea;
max-width: 19.4375rem;
min-width: 220px;
.social-icon {
padding-right: 2.19rem !important;
}
.social-title {
font-size: $fs-base;
font-family: "Satoshi";
color: $heading-color;
}
}
}
.bitnasdaq-community {
.bit-comunity {
gap: 11.5rem;
}
}
.community-querries {
display: flex;
justify-content: center;
margin: 0rem 11rem;
.ant-row-flex {
/* display: flex;
align-items: center; */
padding: 2rem 4rem;
background-image: url("/images/community-querries-bg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.help-btn-container {
text-align: end;
}
.help-btn {
padding: 0rem 2.555rem;
border-radius: 4px;
}
.join-us-new-heading {
font-size: $fs_7xl;
}
}
}
@media screen and (max-width: 1440px),
(min-width: 1153px) and (max-width: 1195px) {
.main-content {
padding: 0 25px;
}
}
@media screen and (max-width: 1100px) {
.join-us-new-header {
.community-card-container {
gap: 3.5rem !important;
left: 0;
}
}
.bitnasdaq-community {
.bit-comunity {
gap: 9.5rem;
}
}
.community-querries {
margin: 0rem 9.5rem;
}
}
@media screen and (max-width: 1000px) {
.main-content {
background-color: #9d41a5;
}
.community-card-container {
gap: 1.5rem !important;
}
.join-us-main-con {
.joinus-cards {
.join-social-card {
.ant-col-lg-6 {
width: 28% !important;
}
}
}
.bitnasdaq-community {
.bit-comunity {
gap: 6.5rem;
}
}
.community-querries {
margin: 0rem 8rem;
}
}
}
}
我目前面临一个问题,即我对 max-width: 1100px 和 max-width: 1000px 的媒体查询没有应用预期的样式。我已经验证了代码的语法和结构,一切似乎都是正确的。但是,在不同的屏幕大小上进行测试时,这些媒体查询中的样式不会生效。它在 800px 下工作,我不需要它。
答: 暂无答案
评论