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

ProgramBox

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

Post author:admin
Запись опубликована:22 января, 2022
Post category:Вопросы по программированию

#html #css #web #github-pages

Вопрос:

Я попытался опубликовать свой сайт на страницах github, но медиа-запрос, похоже, не работает на опубликованном веб-сайте, в то время как он отлично работает на моем расширении live server. Я читал похожие вопросы, и предложенные ответы должны были включать мета-тег видового экрана и очистить кэш, я сделал и то, и другое, но, похоже, ничего не работает. Это всего лишь мой второй сайт, и у меня нет большого опыта, пожалуйста, помогите. Заранее спасибо

 @import url("https://fonts.googleapis.com/css2?family=Zen Dotsamp;display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source Serif Pro:ital@1amp;display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant Garamond:ital,wght@1,300amp;display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  color: white;
}

.title {
  color: #ffffff;
  font-size: 55px;
  position: relative;
  bottom: 51px;
  font-family: "Zen Dots", cursive;
  text-align: center;
}

#landing {
  background-image: url(https://images.pexels.com/photos/3838850/pexels-photo-3838850.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.navbar {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: black;
  padding: 10px;
  min-height: 8vh;
}

li,
a {
  text-decoration: none;
  list-style: none;
  color: #ffffff;
}

.navlinks li {
  display: inline-block;
}

.navlinks li {
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 20px;
  font-size: 1.2rem;
}

.navlinks li:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.logo {
  font-size: 1.5rem;
}

.navbar button {
  border: 3px solid white;
  padding: 9px;
  background-color: transparent;
  color: white;
  border-radius: 20px;
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1px;
  position: relative;
  right: 50px;
}

.navbar button:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  background-color: white;
  color: #000;
  font-weight: 900;
}

.burger .line {
  background-color: #ffffff;
  height: 3px;
  width: 25px;
  margin: 5px;
}

.burger {
  display: none;
}

.card__readmore {
  text-decoration: underline;
  font-weight: 800;
}

#about {
  min-height: 100vh;
}

#about h1 {
  text-align: center;
  font-size: 2.5rem;
  background-color: #000;
  font-family: "Zen Dots", cursive;
  margin: 1rem 0;
}

.about-grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: minmax(60vh, auto);
  grid-template-rows: minmax(60vh, auto);
  grid-gap: 1rem;
}

.aboutme-content {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  font-family: "Source Serif Pro", serif;
  font-size: 1.3rem;
  padding: 1rem;
  margin: 1rem;
}

.about-image {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}

.about-image {
  background-image: url(https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;w=500);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  margin: 1rem;
}

* {
  font-family: Cormorant Garamond;
  font-size: 1rem;
  text-decoration: none;
}

.blogs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-grid-columns: (1fr) [3];
  grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: (minmax(200px, auto)) [3];
  grid-template-rows: repeat(3, minmax(200px, auto));
  gap: 1.5rem;
  padding: 3rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 100vh;
}

.blog {
  background-color: white;
  color: black;
  border-radius: 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 300px;
  flex: 1 0 300px;
  max-width: 450px;
  overflow: hidden;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transform: rotateY(20deg);
  transform: rotateY(20deg);
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  margin: 3rem 3rem;
}

.cardcontent {
  padding: 1rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card__image {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.card__title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.card__snippets {
  margin: 7px 0;
}

.card__readmore {
  margin-top: auto;
  text-transform: uppercase;
  text-align: right;
  margin-right: 15px;
  -webkit-transition: 5s ease-in-out;
  transition: 5s ease-in-out;
}

.blog:hover {
  -webkit-transform: translateY(1rem) scale(1.3);
  transform: translateY(1rem) scale(1.3);
}

.behind {
  background-color: white;
  color: black;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 300px;
  flex: 1 0 300px;
  max-width: 450px;
  overflow: hidden;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#cards {
  display: -ms-grid;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.card01 {
  width: 400px;
}

.card1__content {
  text-align: center;
  position: relative;
  padding: 7em;
  -webkit-transition: -webkit-transform 3s;
  transition: -webkit-transform 3s;
  transition: transform 3s;
  transition: transform 3s, -webkit-transform 3s;
  background: url(https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;w=500);
  background-size: cover;
  background-position: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card1__front,
.card1__back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-grid-rows: 1fr 0.3fr;
  grid-template-rows: 1fr 0.3fr;
}

.card01:hover .card1__content {
  -webkit-transform: rotateY(0.5turn);
  transform: rotateY(0.5turn);
}

.card1__title {
  font-size: 3rem;
  -webkit-transform: translateZ(6rem);
  transform: translateZ(6rem);
}

.Intro {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.card1__back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #333333;
  background: radial-gradient(circle, #333333 0%, #041907 100%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card1__body {
  -webkit-transform: translateZ(3rem);
  transform: translateZ(3rem);
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

.card1__front p {
  -webkit-transform: translateZ(60px);
  transform: translateZ(60px);
}

.card1__back img,
.card1__back img a,
p {
  height: 30px;
  -webkit-transform: translateZ(3rem);
  transform: translateZ(3rem);
  padding: 3px;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
}

#cards h1 {
  font-size: 4rem;
}

.icons img:hover {
  -webkit-box-shadow: rgba(32, 31, 31, 0.37);
  box-shadow: rgba(32, 31, 31, 0.37);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

@media (max-width: 702px) {
  body {
    overflow-x: hidden;
  }
  .navlinks {
    position: absolute;
    right: 0;
    height: 100vh;
    top: 8vh;
    background-color: #041907;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50vw;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 1s ease-in;
    transition: -webkit-transform 1s ease-in;
    transition: transform 1s ease-in;
    transition: transform 1s ease-in, -webkit-transform 1s ease-in;
  }
  .navlinks li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
  .burger .line {
    background-color: #ffffff;
    height: 3px;
    width: 25px;
    margin: 5px;
  }
}

@media screen and (max-width: 1000px) {
  .about-grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: (minmax(60vh, auto)) [2];
    grid-template-rows: repeat(2, minmax(60vh, auto));
  }
  .about-image {
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
  }
  .aboutme-content {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
  }
}
/*# sourceMappingURL=pro3.css.map */

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="pro3.css">
    <title>Shreyas Singh</title>
</head>
<body>
    <nav class="navbar">
        <div class="logo">SHREYAS SINGH</div>
            <ul class="navlinks">
                <li><a href="#landing">home</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#cards">contact me</a></li>
            </ul>    
        <div class="burger">
            <div class=" line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
        </div>
    </nav>
    <section id="landing">
        <h1 class="title">Shreyas Singh</h1>        
    </section>
    <section id="about">
        <div class="about-title"><h1>About Me</h1></div>
            <div class="about-grid-container">   
            <div class="about-image"></div>
            <div class="aboutme-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae laudantium nulla perferendis illum veritatis? Neque culpa magni quasi consectetur, dolor eveniet at. Libero aperiam odit doloremque fugiat. Ad accusamus vero commodi optio quibusdam repellat dicta exercitationem, inventore at! Velit, ipsam rerum? Labore sed sequi cum et provident quasi officia sit voluptatibus? Explicabo fugit quisquam totam, repellendus veritatis rerum consectetur in, ullam quas repudiandae asperiores atque dolorem, fugiat minus quaerat sint similique fuga. Ipsum culpa illo magni labore. Dolorem officia id ratione architecto distinctio quasi, soluta qui delectus impedit corporis quaerat atque iure facere labore! Doloremque sequi sint hic, autem quis, quaerat est voluptates debitis voluptate dignissimos eius omnis aut magni nihil consectetur error velit animi. Ipsa obcaecati voluptates soluta et dolor possimus dolore, dicta consectetur est culpa rerum quasi molestiae iusto architecto illum mollitia similique pariatur corrupti dolores quos officiis amet suscipit neque. Earum autem libero dolorum, consectetur quod assumenda saepe neque iusto, blanditiis, ducimus molestias perspiciatis magni. Non modi assumenda facere officia, maiores nemo! Natus ipsum quasi praesentium atque, recusandae optio nesciunt unde esse animi modi vel nemo velit sed reiciendis odio impedit veritatis voluptatibus. Pariatur iure reiciendis, corporis rerum quae quidem vero, accusantium distinctio ut quo nam at.</div>
    </section>
    <section class="blogs">
        <a href="#" class="blog"> 
            <div class="card__image" style="background-image: url(https://images.pexels.com/photos/7006257/pexels-photo-7006257.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260);"></div>
            <div class="cardcontent">
                <div class="card__title">Blog 1 Title</div>
                <div class="card__snippets">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sequi nam. Ratione, doloribus soluta, reiciendis quod alias eius explicabo</div>
                <div class="card__readmore">read more...</div>
            </div>
        </a>
        <a href="#" class="blog"> 
            <div class="card__image" style="background-image: url(https://images.pexels.com/photos/7487488/pexels-photo-7487488.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260);"></div>
            <div class="cardcontent">
                <div class="card__title">Blog 2 Title</div>
                <div class="card__snippets">Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sequi nam. Ratione, doloribus soluta, reiciendis quod alias eius explicabo</div>
                <div class="card__readmore">read more...</div>
            </div>
        </a>
        <a href="#" class="blog"> 
            <div class="card__image" style="background-image: url(https://images.pexels.com/photos/4394243/pexels-photo-4394243.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;w=500);"></div>
            <div class="cardcontent">
                <div class="card__title">Blog 3 Title</div>
                <div class="card__snippets">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus saepe illo enim fugit deleniti praesentium accusamus reprehenderit ipsa exercitationem, corrupti rerum vitae, sit alias magnam possimus inventore dolores? Repellat, inventore?</div>
                <div class="card__readmore">read more...</div>
            </div>
        </a>
        <a href="#" class="blog"> 
            <div class="card__image" style="background-image: url(https://images.pexels.com/photos/7486819/pexels-photo-7486819.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;w=500);"></div>
            <div class="cardcontent">
                <div class="card__title">Blog 4 Title</div>
                <div class="card__snippets">Lorem ipsum dolor sit amet s eius explicabo</div>
                <div class="card__readmore">read more...</div>
            </div>
        </a>
        <a href="#" class="blog"> 
            <div class="card__image" style="background-image: url(https://images.pexels.com/photos/4394221/pexels-photo-4394221.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;w=500);"></div>
            <div class="cardcontent">
                <div class="card__title">Blog 5 Title</div>
                <div class="card__snippets">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque suscipit dolore corporis laudantium odit. Eveniet officiis architecto repellat numquam inventore? Possimus laudantium neque nemo, praesentium exercitationem provident voluptatem quod maxime?
                In asperiores dignissimos dolorum quia, reprehenderit perferendis recusandae deserunt! Quaerat numquam, omnis, expedita ab repellat quas minus ipsum maxime facilis pariatur possimus modi. Optio cum, ullam temporibus iusto eveniet sunt.</div>
                <div class="card__readmore">read more...</div>
            </div>
        </a>
        
    </section>
    <section id="cards">
        <h1>Get in Touch</h1>
       <div class="card01"> 
        <div class="card1__content">
            <div class="card1__front">
                <h2 class="card1__title">Shreyas Singh</h2>
                <p class="Intro">Absolutely Jobless</p>
            </div>
            <div class="card1__back">
                <div class="icons">
                    <a href="#"><img src="https://img.icons8.com/doodle/50/000000/instagram-new.png"/></a>
                    <a href="#"><img src="https://img.icons8.com/doodle/48/000000/github--v1.png"/></a>
                    <a href="#"><img src="https://img.icons8.com/doodle/48/000000/linkedin--v2.png"/></a>
                    <a href="#"><img src="https://img.icons8.com/doodle/48/000000/twitter--v1.png"/></a>
                </div>
                <p class="card1__body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam earum fugit doloremque illum aliquid consequuntur reiciendis iste rerum labore quidem! <br><br> ( 91) 6888868888</p>

                </div>
            </div>
        </div>
    </section>
<script src="app.js"></script>
</body>
</html>

пожалуйста, помогите.
Ссылка на мой веб-сайт
Вот как это должно работать

1. Используете ли вы scss? Вы правильно его скомпилировали?

2. Существует разница между SCSS / CSS, используемым для вашей версии Codepen, которая содержит 372 строки, и файлом pro3.css, который вы используете для своего веб-сайта, который содержит 484 строки (и, согласно валидатору CSS W3 , содержит ряд ошибок). Как рекомендовал @battaboombattabaam, проверьте свой компилятор SCSS.

3. Да, проблема была с компиляцией scss, была устранена благодаря @battaboombattabaam

4. разобрался с проблемой благодаря @RichDeBourke

Метки: в то время как он хорошо работает, когда я использую живой сервер, Почему медиа-запрос не работает после публикации сайта

Вопрос:

Комментарии:

Вам также может понравиться

Android — Проверка того, что действие вызывает исключение

сбой nls в некоторых подмножествах данных, но не в других, похожих, подмножествах

Django: внедрение websockets для работы с моим существующим приложением на основе MVT (каналам, похоже, нужно, чтобы я выбросил весь мой существующий код)