Не работает медиа-запрос на конкретную ширину экрана [требует правки]

299
21 октября 2017, 16:48

Делаю адаптивную версию сайта. Почему некоторые медиа-запросы не работают, а игнорируются? Например, последний запрос на 700px?

a{ 
    text-decoration: none; 
} 
 
 
.header{ 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
 
.search{ 
    display: flex; 
    align-items: center; 
    width: 100%; 
} 
 
.search-block{ 
    max-width: 1478px; 
    width: 100%; 
} 
 
 
.search-block input{ 
    background-image: url(../img/header/search-pic.png); 
    background-repeat: no-repeat; 
    background-position: 98% 50%; 
    width: 100%; 
    height: 43px; 
    border-bottom: none; 
    border-top: none; 
    border-left: none; 
} 
 
input::-webkit-input-placeholder{ 
    opacity: 0.5; 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 12px; 
    font-weight: 400; 
    line-height: 24px; 
    letter-spacing: 0.3px; 
    padding-left: 90%; 
    padding-top: 10px; 
} 
 
 
.language-select{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: nowrap; 
    margin-left: 10px; 
} 
 
.language-select__item{ 
    margin-right: 20px; 
    color: #cb1611; 
} 
 
.language-select__item:hover{ 
    cursor: pointer; 
    color: #000000; 
} 
 
 
.menu{ 
    width: 100%; 
    background-color: #f7f9fb; 
    display: flex; 
    justify-content: space-around; 
} 
 
.logo-wrap{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 14%; 
} 
 
.logo-link{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
 
.tatar-center{ 
    color: #000000; 
    font-family: Constantia; 
    font-size: 13px; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 0.97px; 
    margin-left: 13px; 
} 
 
.box-container{ 
    width: 60%; 
} 
 
.menu__links{ 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
} 
 
.menu__links__item{ 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 14px; 
    font-weight: 700; 
    line-height: 60px; 
    text-transform: uppercase; 
    letter-spacing: 0.35px; 
    letter-spacing: 0.35px; 
    position: relative; 
    text-decoration: none; 
} 
 
.menu__links__item:hover{ 
    background-image: linear-gradient(to right, #348068, #348068); 
    background-position: 0 3.04em; 
    background-repeat: repeat-x; 
    background-size: 8px 5px;            
} 
 
 
 
.callback{ 
    display: flex; 
    align-items: center; 
    width: 18%; 
} 
 
.phone-num{ 
    color: #000000; 
    font-family: "Proxima Nova - Semibold"; 
    font-size: 16px; 
    font-weight: 400; 
    line-height: 60px; 
    text-transform: uppercase; 
    letter-spacing: 0.4px; 
    white-space: nowrap; 
} 
 
.callback-btn{ 
    max-width: 186px; 
    width: 100%; 
    height: 40px; 
    display: flex; 
    flex-direction: row-reverse; 
    justify-content: space-around; 
    align-items: center; 
    border-radius: 19px; 
    background-color: #e4e7ec; 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 13px; 
    font-weight: 400; 
    line-height: 60px; 
    letter-spacing: 0.65px; 
    text-decoration: none; 
    margin-left: 24px; 
    white-space: nowrap; 
} 
 
.callback-btn:hover{ 
    background-color: rgba(228, 231, 236, 0.7); 
} 
 
 
.news{ 
    width: 100%; 
} 
 
.block-title__news{ 
    width: 100%; 
    background-image: linear-gradient(to right, rgba(117, 102, 102, 0.08), rgba(117, 102, 102, 0.08)), url('../img/news/news-bg.png'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding-top: 73px; 
    padding-bottom: 67px; 
} 
 
.h1{ 
    color: #000000; 
    font-family: Constantia; 
    font-size: 48px; 
    font-weight: 400; 
    line-height: 24px; 
    letter-spacing: 1.2px;  
    text-align: center; 
} 
 
.container{ 
    max-width: 1424px; 
    width: 100%; 
    margin: 0 auto; 
} 
 
.presentation-wraper{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: 78px; 
} 
 
.presentation-list{ 
    display: flex; 
    flex-wrap: wrap; 
} 
 
.presentation-list__item{ 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    border: 2px solid #f1f5f9;  
    max-width: 281px; 
    width: 100%; 
    margin-right: 13px; 
    margin-bottom: 14px; 
    padding-top: 34px; 
    padding-right: 29px; 
    padding-left: 29px; 
    padding-bottom: 24px; 
} 
 
.presentation-list__item:hover{ 
    background-image: url('../img/news/bg-item.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 
 
.presentation-list__item:hover .presentation-list__item-title{ 
    color: #ffffff; 
} 
 
.presentation-list__item:hover .presentation-list__item_p{ 
    color: #ffffff; 
} 
 
.presentation-list__item:hover .date span{ 
    color: #ffffff; 
} 
 
.presentation-list__item:hover .open-info{ 
    opacity: 1; 
} 
 
.presentation-list__item-title{ 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 15px; 
    font-weight: 700; 
    line-height: 22px; 
    letter-spacing: 0.38px; 
    margin-bottom: 24px; 
} 
 
.p{ 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 13px; 
    font-weight: 400; 
    line-height: 22px; 
    letter-spacing: 0.33px; 
} 
 
.date{ 
    display: flex; 
    align-items: center; 
    margin-top: 80px; 
} 
 
.date span{ 
    opacity: 0.47; 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 11px; 
    font-weight: 400; 
    line-height: 22px; 
    letter-spacing: 0.28px; 
    margin-left: 8px; 
} 
 
.btn-load{ 
   max-width: 203px; 
   width: 100%; 
   height: 48px;  
   box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.06); 
   border-radius: 4px; 
   background-color: #cb1611; 
   display: flex; 
   justify-content: space-around; 
   align-items: center; 
   color: #ffffff; 
   font-family: "Proxima Nova"; 
   font-size: 15px; 
   font-weight: 700; 
   line-height: 24px; 
   letter-spacing: 0.38px; 
   text-decoration: none; 
   margin-top: 46px; 
   transition: background 0.25s ease-out; 
} 
 
.btn-load:hover{ 
    background-color: #ef0707; 
} 
 
.btn-load img{ 
    transition: transform 0.6s ease-out; 
} 
 
.btn-load:hover>img{ 
    transform: rotate(180deg); 
} 
 
 
.presentation-list__item_bottom{ 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
 
.open-info{ 
    width: 44px; 
    height: 44px; 
    background-color: #cb1611; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-top: 80px; 
    opacity: 0; 
} 
 
 
.footer{ 
    width: 100%; 
    margin-top: 65px; 
    border-top: 4px solid #e9edf1; 
    padding-top: 20px; 
    padding-bottom: 50px; 
} 
 
.footer-wrap{ 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
} 
 
.copyright{ 
    opacity: 0.8; 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 13px; 
    font-weight: 400; 
    line-height: 24px; 
    position: relative; 
    border-right: 4px solid #e9edf1; 
    padding-bottom: 58px; 
    padding-top: 20px; 
    padding-right: 152px; 
    white-space: nowrap; 
} 
 
 
.temp-wrap{ 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-start; 
    width: 72%; 
} 
 
.footer-links{ 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    border-right: 4px solid #e9edf1; 
    padding-bottom: 20px; 
    padding-top: 20px; 
    padding-right: 140px; 
} 
 
.footer-links__item{ 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 13px; 
    font-weight: 400; 
    line-height: 30px; 
    transition: color 0.25s linear; 
} 
 
.footer-links__item:hover{ 
    color:#cb1611; 
} 
 
.read-documents{ 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
 
.read-documents a{ 
    color: #000000; 
    font-family: "Proxima Nova"; 
    font-size: 13px; 
    font-weight: 400; 
    line-height: 30px; 
    margin-left: 12px; 
} 
 
.bik-studio a{ 
    color: #cb1611; 
    transition: color 0.25s linear; 
} 
 
.bik-studio a:hover{ 
    color: rgba(203, 22, 17, 0.45); 
} 
 
.copyright_temp-wrap__wrap{ 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    width: 65%; 
} 
 
 
 
 
@media screen and (max-width: 1388px){ 
    input::-webkit-input-placeholder{ 
        padding-left: 80%; 
    } 
} 
 
 
@media screen and (max-width: 1320px){ 
    .box-container{ 
        width: 66%; 
    } 
} 
 
 
 
@media screen and (max-width: 1172px){ 
 
#page-wrapper { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 
#title { 
  color: #f6f6f6; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 2em; 
} 
#btn { 
  position: fixed; 
  z-index: 5; 
  top: 68px; 
  right: 15px; 
  cursor: pointer; 
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
} 
#btn div { 
  width: 35px; 
  height: 2px; 
  margin-bottom: 8px; 
  background-color: #00dffc; 
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms; 
} 
// #btn.active { 
//   left: 230px; 
// } 
#btn.active div { 
  background-color: #343838; 
} 
#btn.active #top { 
  transform: translateY(10px) rotate(-135deg); 
} 
#btn.active #middle { 
  opacity: 0; 
  transform: rotate(135deg); 
} 
#btn.active #bottom { 
  transform: translateY(-10px) rotate(-45deg); 
} 
#box { 
  position: fixed; 
  z-index: 4; 
  overflow: auto; 
  top: 0px; 
  right: -275px; 
  width: 275px; 
  opacity: 0; 
  padding: 20px 0px; 
  height: 75%; 
  background-color: #f6f6f6; 
  color: #343838; 
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); 
} 
#box.active { 
  right: 0px; 
  opacity: 1; 
} 
#items { 
  position: relative; 
  top: 50%; 
  transform: translateY(-50%); 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  height: 75%; 
} 
#items .item { 
  position: relative; 
  cursor: pointer; 
  padding: 15px 30px; 
  transition: all 250ms; 
} 
 
.menu__links__item:hover{ 
    background: none; 
} 
 
#items .item:hover { 
  padding: 15px 45px; 
  background-color: rgba(52, 56, 56, 0.2); 
} 
 
.menu__links__item{ 
    line-height: 20px; 
    vertical-align: center; 
} 
 
#btn, #btn * { 
  will-change: transform; 
} 
#box { 
  will-change: transform, opacity; 
} 
 
 
} 
 
@media screen and (max-width: 1083px){ 
    .presentation-list{ 
        justify-content: center; 
    } 
} 
 
 
@media screen and (max-width: 1000px) {  
    .callback{ 
        display: none; 
    } 
 
    .menu{ 
        justify-content: flex-start; 
    } 
 
    .logo-wrap{ 
        margin-left: 20px; 
        width: 30%; 
    } 
} 
 
@media screen and (max-width: 700px){ 
    .presentation-list{ 
        display: flex; 
        flex-direction: column; 
    } 
 
    .presentation-list__item{ 
        width: 100%; 
    } 
}
    <section class="news"> 
        <div class="block-title__news"> 
            <h1 class="h1">Новости</h1> 
        </div> 
        <div class="container"> 
            <div class="presentation-wraper"> 
                <div class="presentation-list"> 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
 
 
                    <div class="presentation-list__item"> 
                        <div class="presentation-list__item-title">Компания «Disney» презентовала в Казани проект для молодых кинематографистов</div> 
                        <p class="p presentation-list__item_p"> 
                            В Казани прошла skype - сессия с представителями российской компании «Disney», которые рассказали о своем проекте для молодых кинематографистов 
                        </p> 
                        <div class="presentation-list__item_bottom"> 
                            <div class="date"> 
                                <img src="img/news/clock-icon.png" alt=""> 
                                <span>14.08.2017 г.</span> 
                            </div> 
                            <a href="#" class="open-info">    
                                <img src="img/news/arrow-right.png" alt=""> 
                            </a> 
                        </div> 
                    </div> 
                </div> 
                <a href="#" class="btn-load">Загрузить еще<img src="img/news/load-pic.png" alt=""></a> 
            </div> 
        </div> 
    </section> 
 
    <footer class="footer"> 
        <div class="container"> 
            <div class="footer-wrap"> 
                <div class="copyright_temp-wrap__wrap"> 
                    <div class="copyright"> 
                        © 2003–2017 Наследие Татарстана 
                    </div> 
                    <div class="temp-wrap"> 
                        <div class="footer-links"> 
                            <a href="#" class="footer-links__item">Контакты</a> 
                            <a href="#" class="footer-links__item">Объекты насления Татарстана</a> 
                        </div> 
                        <div class="read-documents"> 
                            <img src="img/footer/doc-pic.png" alt=""> 
                            <a href="#">Документы</a> 
                        </div>                     
                    </div> 
                </div> 
               <div class="bik-studio"> 
                    Сделано в <a href="#">BIK-agency</a> 
                </div>                 
            </div> 
        </div> 
    </footer> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

Попробуйте, например вот так @media screen and (min-width: 1024px) and (max-width: 1240px) значения только свои поставьте

Answer 2

Все медиа-запросы работают, но какие-то игнорируются. Почему? Например, последний запрос на 700px

Он не игнорируется, а прекрасно работает.

@media screen and (max-width: 700px){
   .presentation-list{
       display: flex;
       flex-direction: column;
   }
   .presentation-list__item{
       width: 100%;
   }
}

Например .presentation-list применяется (см скрин).

Класс .presentation-list__item тоже 100%. Но на весь экран он не будет, так как у него есть max-width: 281px;.

READ ALSO
char[] в Character[]
Java

char[] в Character[]

Как перевести массив char[] к его оболочке Character[] для дальнейшей сортировки в обратном порядке? Делаю по аналогии как с int -> Integer:

 216
eclipse не могу добавить пакет классов
Java

eclipse не могу добавить пакет классов

ЗдравствуйтеКак добавить пакеты в проект Eclipse? Есть каталог src

 226
Задача про потоки
Java

Задача про потоки

В гостинице имеется N одноместных номеровПериодически приходят клиенты, занимают номер (или ждут освобождения номера, если все номера заняты),...

 203
alter table add constraint foreign key
Java

alter table add constraint foreign key

ЗдравствуйтеПомогите, пожалуйста, разобраться в чем моя ошибка

 254