Jump to content
  • 0

Darklurkers
 Share

Question

Сделал я шаблон и решил сделать его адаптивным. Вобщем чтото пошло не так,  медиа запрос стоит на min-width(900px) and  max-width(1000px) но уменьшая окно браузера я заметил что отчёт идёт от 720 пх и до 800 пх. Что это за бред вообще не понимаю.

 

215151253426.thumb.png.c503baee3a7db89b7dd3cfe3b39bc328.png

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By fooxy96
      В медиа запросах в стилях стоят переопределенные стили под разные экраны, путём уменьшения экрана подключается эти медиа запросы. Видел ролик, что так нельзя делать. если в инспекторе закрыт стиль черточкой то это плохо, но не знаю почему. Стоит ли так делать или стоит всё переделать!?
       

      Мой сайт
      <!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/clear_css.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slider.css"> <meta charset="UTF-8"> <title>GoSport</title> </head> <body> <header class="header"> <div class="header-logo"> <img class="header-logo__img" src="img/logo.svg" alt="logo"> <div class="header-logo__logo-title"> <div class="header-logo__title-top">GoSport</div> <div class="header-logo__title-bottom">Магазин спортивных товаров</div> </div> </div> <div class="call"> <a class="call__number" href="tel:+7(495)746-86-48">+7(495)746-86-48</a> <button class="call__btn">Заказать звонок</button> </div> </header> <div class="header-menu"> <nav class="menu"> <a class="menu__link menu__link_none" href="#">Тренажеры</a> <a class="menu__link" href="#">Фитнес</a> <a class="menu__link" href="#">Инвентарь</a> <a class="menu__link" href="#">Массажное оборудование</a> <a class="menu__link" href="#">Другое</a> </nav> </div> <div class="lk-box"> <form class="form-search"> <input class="form-search__input-search" type="search" name="q" id="gsearch" placeholder="Поиск среди 7000 товаров"> <button class="form-search__find-button" type="submit"></button> </form> <div class="panel"> <button id="panel__exit">Войти</button> <button id="panel__basket">Корзина</button> </div> </div> <div class="description"> <div class="top-directory"> <h1 class="description__title"> Начните вести здоровый образ жизни вместе с GoSport! </h1> <p class="description__text"> Все товары вы сможете найти у нас в каталоге, на некоторые из них действуют сезонные скидки и спец предложения. У нас в наличии множество товаров как для новичков так и для профи. </p> <button class="description__btn"> Смотреть каталог </button> </div> <div class="top-slider"> Слайдер </div> </div> </body> </html> @charset "utf-8"; /* CSS Document */ .header { display: flex; justify-content: space-between; height: 91px; background-color: #2B3D2F; flex-wrap: nowrap; } .header-logo{ display: flex; align-items: center; align-self: center; flex: 0 0 auto; padding-left: 21px; } .header-logo__img{ width: 50px; height: 50px; } .header-logo__logo-title{ padding-left: 15px; } .header-logo__title-top{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 18px; line-height: 21px; color: #FFFFFF; } .header-logo__title-bottom{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #FFFFFF; } .call{ display: flex; justify-content: flex-end; align-items: center; align-self: center; flex: 0 0 auto; flex-wrap: wrap; } .call__number{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; color: #FFFFFF; } .call__btn{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 13px; line-height: 15px; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 5px; padding: 15px; background: #2B3D2F; margin: 0px 80px 0px 38px; transition-duration: 2s; transition-property: border-color, color; } .call__btn:hover { border-color: chartreuse; color: chartreuse; } .header-menu { display: flex; align-items: center; height: 28px; background: rgba(22, 30, 25, 0.97); } .lk-box{ display: flex; justify-content: space-between; margin: 25px 0px 0px 0px; padding: 0px 70px; } @media screen and (max-width : 786px ){ .call__btn{ margin: 0px 10px 0px 10px; } .lk-box{ display: none; } nav.menu{ font-size: 10px; margin-left: 15px; } .call{ display: flex; margin: 0px; } .header-logo{ display: flex; justify-content: flex-start; padding: 0px 0px 0px 12px; } .header{ padding-top: 10px; height: 115px; } .header-menu{ height: 25px; } } @media screen and (max-width : 435px ){ nav.menu{ display: none; } .call__btn{ padding: 8px; } .header-logo{ padding: 0px; } .header-logo__logo-title{ padding-left: 5px; } .call{ padding-bottom: 5px; } .header{ flex-direction: column; justify-content: space-around; } .call__number{ display: none; } .header-menu{ height: 17px; } } .menu { display: flex; font-family: Roboto; margin-left: 71px; } .menu__link { display: flex; color: #FFFFFF; margin-left: 25px; flex: 0 1 auto; transition-duration: 0.7s; transition-property: color; } .menu__link_none { margin: 0; } .menu__link:hover { color: lightskyblue; } .form-search{ display: flex; flex: 0 1 auto; margin-left: -50px; } .form-search__input-search{ width: 345px; padding: 0px 15px; border: 1px solid #E6E6E6; border-radius: 3px; } .form-search__find-button{ background: url("../img/search-icon.svg") no-repeat 50% 50%; /* Параметры фона */ background-size: 25px; background-color: #FF8E25; border-radius: 0px 5px 5px 0px; width: 50px; height: 45px; flex: 0 0 auto; } .form-search__find-button:hover{ background-color: rgba(255,127,8,1.00); transition-duration: 0.9s; transition-property: background-color; } .form-search__input-search:hover{ border-color: dodgerblue; transition-duration: 1.2s; transition-property: border-color; } .panel{ display: flex; justify-content: space-between; } #panel__exit{ display: flex; justify-content: center; align-items: center; min-width: 100px; min-height: 45px; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; color: #FF8E25; transition-duration: 0.9s; transition-property: color, background-color; background-color: white; border: 1px solid #E6E6E6; border-radius: 3px; } #panel__exit:hover{ color: white; background: #FF8E25; } #panel__basket{ display: flex; justify-content: flex-start; align-items: center; width: 168px; height: 45px; background-color: #FF8E25; border-radius: 3px; font-family: Roboto; padding-left: 20px; font-style: normal; font-weight: normal; font-size: 14px; color: #FFFFFF; transition-duration: 0.9s; transition-property: background-color; margin-left: 20px; } #panel__basket:hover{ background-color: rgba(255,127,8,1.00); } .form-search__input-search:-ms-input-placeholder{ color: #DDDDDD; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; } .form-search__input-search::placeholder{ color: #DDDDDD; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; } @media screen and (max-width : 550px ){ .call__number{ display: none; } } .description{ display: flex; padding: 24px 81px 0px 80px } .top-directory{ display: flex; flex-direction: column; flex: 0 0 auto; width: 40%; padding-top: 50px; margin-right: 77px; } .description__title{ font-family: Roboto; font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; color: #161E19; } .description__text{ font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #161616; margin-top: 18px; } .description__btn{ width: 205px; height: 50px; font-family: Roboto; font-style: normal; font-weight: bold; font-size: 14px; line-height: 16px; color: #FFFFFF; background-color: #FF8E25; border-radius: 5px; margin: 35px 0px 0px 35px; } .description__btn:hover{ background: red; } .top-slider{ width: 60%; } @media screen and (max-width: 790px) { .description__title{ font-size: 24px; line-height: 28px; } .description__text{ display: none; } .description{ flex-direction: column; padding: 0px; } .top-directory{ display: flex; flex-direction: row; align-items: center; width: 100%; padding: 15px; } .description__btn{ margin: 0px 0px 0px 117px; padding: 0px 10px; } .top-slider{ width: 100%; } } @media screen and (max-width : 454px ){ .header-logo{ padding: 0px 5px; } .header-logo__logo-title{ display: none; } .description__btn{ font-size: 10px; line-height: 12px; margin: 7px 0px 0px 0px; width: 123px; height: 30px; } .description__title{ font-size: 14px; line-height: 16px; text-align: center; } .top-directory{ flex-direction: column; padding: 20px; } }  
    • By GorodSka3ka
      В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy