Медиа-запрос не отвечает - PullRequest
Новая
       4

Медиа-запрос не отвечает

0 голосов
/ 11 апреля 2020

это мой css раздел. Изображение реагирует в p c с точки зрения поворота, но не с точки зрения выравнивания текста. В то время как в мобильном телефоне, он абсолютно не отвечает. 

      @media (max-width:975px) {
            #title {
                text-align: center;
            }
            .title-image {
                position: static;
                transform: rotate(0);
            }
        }
<link rel="stylesheet" href="master.css">



<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section class="colored-section" id="title">

        <div class="container-fluid">

            <!-- Nav Bar -->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <a class="navbar-brand" href="">tindog</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav  ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#footer">Contact</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#pricing">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#cta">Download</a>
                        </li>
                    </ul>
                </div>
            </nav>



            <!-- Title -->
            <div class="row">
                <div class="col-lg-6">
                    <div>
                        <h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
                        <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
                        <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button> </div>

                </div>
                <div class="col-lg-6">
                    <div class="phone-img">
                        <img class="title-image" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="iphone-mockup">
                    </div>
                </div>

            </div>


        </div>
    </section>

Это раздел HTML. У меня есть много разделов, но вставка сюда привела бы в замешательство код.

1 Ответ

0 голосов
/ 11 апреля 2020

Ваш медиа-запрос неверен. Я исправил это, и вы можете увидеть это в коде ниже. AFAIK это не @media (max-width:...), а скорее @media only screen and (max-width: 975px)

вот обновленный код. я добавил фон тела, чтобы вы могли легко видеть, когда реагирует css. 

body {
background: #fff;
}

@media only screen and (max-width: 975px) {
      body {
        background: #333;
      }
        #title {
            text-align: center;
        }
        .title-image {
            position: static;
            transform: rotate(0);
        }
    }
<link rel="stylesheet" href="master.css">

<section class="colored-section" id="title">

        <div class="container-fluid">

            <!-- Nav Bar -->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <a class="navbar-brand" href="">tindog</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav  ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#footer">Contact</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#pricing">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#cta">Download</a>
                        </li>
                    </ul>
                </div>
            </nav>



            <!-- Title -->
            <div class="row">
                <div class="col-lg-6">
                    <div>
                        <h1 class="big-heading">Meet new and interesting dogs nearby.</h1>
                        <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
                        <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button> </div>

                </div>
                <div class="col-lg-6">
                    <div class="phone-img">
                        <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
                    </div>
                </div>

            </div>


        </div>
    </section>
...