web: Why is media query not working after publishing the site, while it works well when i use live server

I tried publishing my site on github pages, but the media query doesn't seem to be working on the published website, while it works just fine on my live server extension. I read similar questions, and the answers suggested were to include viewport meta tag and clear cache, I have done both yet nothing seems to be working. This is only my second website and I don't have much experience, please help. Thanks in advance

@import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&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=compress&cs=tinysrgb&dpr=2&h=750&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=compress&cs=tinysrgb&dpr=2&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=compress&cs=tinysrgb&dpr=2&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=compress&cs=tinysrgb&dpr=2&h=750&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=compress&cs=tinysrgb&dpr=2&h=750&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=compress&cs=tinysrgb&dpr=2&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=compress&cs=tinysrgb&dpr=2&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=compress&cs=tinysrgb&dpr=2&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>

please help. Link to my website This is how it is supposed to work

web

mardi 20 avril 2021

Why is media query not working after publishing the site, while it works well when i use live server

Aucun commentaire:

Enregistrer un commentaire