我的樣式表僅在移動視圖中有效，昨天工作正常但今天如果在桌面上查看，所有樣式都消失了

Question

所以我寫了一個小網站，一切都運行得很好，所有樣式都有效但今天它只在普通桌面視圖中顯示移動視圖中的樣式表，它忽略了我的css / style.css中的所有樣式

導航欄和標題圖像保持其樣式，無論瀏覽器的大小如何，只有其他樣式在桌面視圖中消失

我的頁眉和頁腳包含在所有頁面中，其中php包括文件在includes / header.php中並包含/ footer.php

這是項目的鏈接以及maxi.maxihome.co.za

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">



   <!-- Bootstrap--!>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

 <!-- Style sheet -->
 <link rel="stylesheet" href="css/style.css">

 <!--Google Fonts  -->
 <link href="https://fonts.googleapis.com/css? 
 family=Acme|Neuton&display=swap" rel="stylesheet"><link 
 href="https://fonts.googleapis.com/css? 
 family=Acme|Neuton|PT+Mono&display=swap" rel="stylesheet"><link 
 href="https://fonts.googleapis.com/css? 
 family=Acme|Neuton|PT+Mono|Sintony&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css? 
family=Acme|Molengo|Neuton|PT+Mono|Sintony&display=swap" 
 rel="stylesheet">


 <!-- js script header -->
<script type="text/javascript"src="js/app.js">

</script>

<title>Maxi Home Renovations</title>
</head>
<body>
<section class="header">


  <!-- custom menu -->
  <div class="nav">
      <div class="logo">
   <img class="imagelogo"src="images/name.png" alt="">
      </div>


      <div class="togg">
          <div></div>
          <div></div>
          <div></div>
      </div>
   <ul class="firstlevel">
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href="index.php">Home</a></li>
   <li><a href="services.php">Services</a></li>
   <li class="has-sub"><a>Renovations</a>
              <ul class="sub">
                      <li><a href="kitchen.php">Kitchen</a></li>
                      <li><a href="bathroom.php">Bathroom</a></li>
                      <li><a href="living.php">Living Area</a></li>
                      <li><a href="total.php">Total Renovation</a></li>
                  </ul></li>
          <li><a href="contact.php">Contact Us</a></li>
          <li><a href=""><i class="fa fa-facebook-square"></i></a></li>


        </ul>

    </div>



  <img class="headerImage" src="images/headerImg.png" 
  alt="HeaderImage">

</section>

</body>

/*index page*/


<?php
include "includes/header.php" ?>

<section class="feature">

<div class="container">
<div class="row">
  <div class="col-sm-6">
    <div id="carouselExampleInterval" class="carousel slide" data- 
       ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active" data-interval="5000">
          <img class="imgCar"src="images/h1.JPG" class="d-block w-100" 
             alt="...">
        </div>
        <div class="carousel-item" data-interval="5000">
          <img class="imgCar"src="images/h2.JPG" class="d-block w-100" 
         alt="...">
        </div>
        <div class="carousel-item" data-interval="5000">
          <img class="imgCar" src="images/h3.jpg" class="d-block w-100" 
           alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleInterval" 
             role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"> 
        </span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleInterval" 
          role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"> 
          </span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>
  <?php
include "includes/footer.php" ?>

.headerImage{
 width: 100%;
 heigth: 300px;
 padding-top:75px;
 color:#bf2132;
 }

 .fimage{
  width: 100%;
  heigth: 300px;
  padding-top:75px;

  }

  .navbar-default{
  background-color:#bf2132;
   border-color: #bf2132;
    }




       /* navigation */

  .nav
   {
   width:100%;
   background-color:#ccc;
   position:fixed;
   top:0;
   left:0;
   z-index: 9999;
   }

  .nav .logo
  {
   display:flex;
   width:200px;
   height: 50px;
   flex-wrap:wrap;
   justify-content: center;
   align-items: center;
   text-transform:uppercase;
   cursor:pointer;
   }
   .imagelogo{
   width:100px;
   heigth:50px;
   }
  .togg
   {
   position:absolute;
   right:40px;
   top:20px;
   display:none;
   z-index: 5;
   }
  .togg div {
   width: 36px;
   height: 2px;
   background-color: red;
   margin: 6px 0px;
   position: relative;
   transition:all .8s ease;
   }
  .togg.lijo div
     {
      position:absolute;
       transition:all .8s ease;
       }
     .togg.lijo div:nth-child(1){
     transform: rotate(48deg);
       top: 7px;
     /* position: absolute; */
     right: 0px;
        }
     .togg.lijo div:nth-child(2)
        {

       width:0px;
       top: 7px;
      /* position: absolute; */
       right: 0px;
       }
       .togg.lijo div:nth-child(3)
      {
       transform: rotate(-48deg);
       top: 7px;
       right: 0px;
       }
     .nav ul.firstlevel
      {
      list-style:none;
      width:calc(100% - 200px);
      background: rgb(191,33,50);
      background: linear-gradient(0deg, rgba(191,33,50,1) 0%, 
      rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
      margin-bottom:0px;
      padding-left:0px;
      }
      .nav ul.firstlevel li
       {
        display:inline-block;
        margin-bottom:0px;
        color:#000;

         }

      .nav ul.firstlevel li a
        {
        cursor:pointer;
         display:block;
        padding:15px;
        transition:.8s ease;
        text-decoration:none;
        text-transform:uppercase;
        color:#fff;
       }
    .nav ul.firstlevel li a:hover
     {
      text-decoration:none;
      }
    .nav ul.firstlevel li ul.sub li {
       display: block;
        background-color:rgba(191,33,50,1);
       }
    .nav ul.firstlevel li ul.sub li:hover {
     display: block;
     background-color:rgba(172, 78, 2, 0.79);
      }
   .nav ul.firstlevel li ul.sub li a{
    color:#fff;
      }
    .nav ul.firstlevel li ul.sub
       {
     width:200px;
     position:absolute;
     padding-left:0px;
     opacity:0;
     visibility: hidden;
    transform:translateY(30px);
    transition:.5s linear;
    padding-top:20px;
   }
  .nav ul.firstlevel li ul.sub:after {
   content: '';
   width: 41px;
   height: 20px;
   border-bottom: solid 18px rgba(191,33,50,1);
   border-left: solid 20px transparent;
   border-right: solid 21px transparent;
   top: 0px;
   display: block;
   position: absolute;
   left: 16px;
    }
  @media(min-width:1024px)
   {
    .nav ul.firstlevel li:hover ul.sub
   {
    visibility:visible;
    opacity:1;
    transform:translateY(0px);
  }
  .nav ul.firstlevel li:hover
 {
   display:inline-block;
   margin-bottom:0px;
   background-color: rgba(27, 27, 27, 0.32);;
   color:#fff !important;
  }
  .nav ul.firstlevel li:hover a
  {
   color:#fff !important;
   }
   }


  @media(max-width:1024px)
  {
   .nav
   {
       min-height:50px;
   }
  .togg
  {
   display:block;
   top:10px;
  }
  .nav ul.firstlevel
   {
    position: absolute;
   top: 50px;
   transform: translateX(100%);
    right: 0;
    transition:.8s ease;
    width:40%;
    height: calc(100vh - 50px);
    z-index: fixed;
  }
  .nav ul.firstlevel li {
   display: block;
   }
 .nav ul.firstlevel.surya {
  transform: translateX(0%);
  }
 .nav ul.firstlevel li ul.sub
 {
  opacity: 1;
  visibility: visible;
  display:none;
  position:relative;
  padding-top:0px;
  width:100%;
  transition:0s;
  transform: translateY(0px);
  }
.nav ul.firstlevel li ul.sub:after
 {
 display:none;
 }


 /* Feature */

 .feature{
 padding-left: 100px;
 padding-right: 100px;
 padding-top: 70px;
 padding-bottom: 70px;
 background-image: url("../images/paper.jpg");
 text-align:center;
 }
.houseimg{
 width: 400px;
 height: 350px;
 border:5px solid rgb(191,33,50);
background-color:#ff0;

 }
.about{
 padding-right: 100px;
 padding-left: 100px;
 padding-bottom: 70px;
 text-align:center;
 background-image: url("../images/paper.jpg");
 }

 /* spinning text */
 #blink{
    width:100%;
    height: 50px;
    padding: 15px;
    text-align: center;
    line-height: 50px;
}
.htext{

    font-family: "Alfa Slab One";
    color: rgb(191,33,50);
    animation: blink 1.5s linear infinite;
     padding-bottom: 100px;
}
     @keyframes blink{
     0%{opacity: 0;}
    50%{opacity: .5;}
   100%{opacity: 1;}
   }

   /* paragraph background */
  .backpar{
   border-radius: 25px;
   background: rgb(191,33,50);
   background: linear-gradient(0deg, rgba(191,33,50,1) 0%, 
   rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
  padding: 20px;
   width: 100%;
   height: 100%;
  color: white;
  font-family: "Concert One";
   }
 .footer{
   background-image: url("../images/footer.png");
    }
    /* Contact */
      .contact{
      padding-left: 70px;
       padding-right: 70px;
       padding-top: 70px;
       padding-bottom: 70px;
       background-image:url("../images/paper.jpg");
      }
     .jumbotron {
        background: rgb(191,33,50);
         color: #FFF;
        border-radius: 0px;

           }
        .jumbotron-sm { padding-top: 24px;
        padding-bottom: 24px; }
       .jumbotron small {
       color: #FFF;
       }
     .h1 small {
     font-size: 24px;
     }

     /*  carousel homepage*/
     .carousel-item{
    width: 100% !important;
     Height: 350px !important;}

   .imgCar{
   width: 100% !important;
   Height: 350px !important;
   border: 2px solid red;
   border-radius: 5px;
   }

Answer 1

我注意到我遺漏了一個大括號，一切都恢復了
尷尬謝謝

我的樣式表僅在移動視圖中有效，昨天工作正常但今天如果在桌面上查看，所有樣式都消失了

問題描述

1 個解決方案

解決方案1
0 2019-06-01 07:43:19

我的樣式表僅在移動視圖中有效，昨天工作正常但今天如果在桌面上查看，所有樣式都消失了

問題描述

1 個解決方案

解決方案1 0 2019-06-01 07:43:19

解決方案1
0 2019-06-01 07:43:19